How to make animation changing videos with mouse click

Asked

Viewed 103 times

1

I’m having a doubt, I don’t even know how to research what I want.

The idea would be to click on the image of Video 1 and Video and Title changed without leaving the page, so pro 2 and 3. I took a beating in some codes but this actually do not know how to search.

inserir a descrição da imagem aqui

javascript css animation

  • Probably what you’re looking for is a Single Page Application that dynamically changes the video without having to reload the page. One of the frameworks used to produce Spas and the [tag:Angularjs]

  • do you already use jQuery or another JS frame, like Angular? Or are you just working with pure css/js? Do you have any restrictions on using any of them?

  • In the video click you can change the video src to the video you need and put the title as well.

1 answer

1

You can do it this way:

function mostraDiv(num) {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='none';
    document.getElementById('div3').style.display='none';
    document.getElementById('div'+num).style.display='block';
}
.hiddenEl{display:none;}
<div class="sidebarContainer">
    <button class="imagens" onclick="mostraDiv('1')">Mostra Div 1</button>
    <button class="imagens" onclick="mostraDiv('2')">Mostra Div 2</button>
    <button class="imagens" onclick="mostraDiv('3')">Mostra Div 3</button>
</div>

<div class="mainContainer">
    <div id="div1">Sou a div1</div>
    <div id="div2" class="hiddenEl">Sou a div2</div>
    <div id="div3" class="hiddenEl">Sou a div3</div>
</div>

Then just make the modifications to your size, changing the buttons for divs and inserting images into them as preview thumbnails of the video that the user will see, by clicking on the button/image intended and also popular the divs with the content (titles, videos etc).

I created here an example on Jsfiddle simple but well elaborated of how this will work with the respective titles and videos for each button, to have an idea.

Browser other questions tagged javascript css animation

You are not signed in. Login or sign up in order to post.