Click on the Link and open a player below it

Question

I have some links, example: Link1 Link2 Link3 Link4 and would like to click on Linkx it opens an "embed" just below it, and that each Link brings its corresponding video.

I’m working on a wordpress Theme, in which I’m trying to modify some parts... I couldn’t solve this question because I don’t know how to hide the videos.

Click on Link1 he opens the video of Link1
Click on Link2 he opens the video of Link2

It has to be on the same page and also has to be just below the link...

Answer 1

Your problem is this::

"Given a list of links, when clicking them, below the clicked item a video will be displayed"

For this, you will need to control the display blocks of the page, so that the videos are well aligned with the links.

Brief comment

I chose to make a horizontal menu (no visual appeal), but that the video appears below the items as soon as clicked. You can arrange otherwise, for example, put each item-video pair in a row. The fact is that by clicking on a link, after opening the first video, the previous one will soon close and pause.

The solution I suggest, has a few points worth just you look more calmly. Are they:

• classList.Toggle(): codepen - Class Toggle (Pure Javascript)
• foreach: MDN - Array.prototype.foreach()
• Flex: MDN - Basic Concepts of flexbox (optional)

Solution:

var v = document.getElementsByClassName('myVideo');
        function classToggle(id) {
            v[id].classList.toggle('hide');
            v[id].classList.toggle('active');
        }

        function closeOtherVideo(id) {
            var c = document.getElementsByClassName('myVideo');
            for(var i=0; i<c.length; i++){
                if(i != id) {
                    v[i].pause();
                    c[i].classList.remove('active')
                    c[i].classList.add('hide')
                }
            }
        }

    document.getElementById('toVideo1').addEventListener('click', function() { classToggle(0),closeOtherVideo(0)});
    document.getElementById('toVideo2').addEventListener('click', function() { classToggle(1),closeOtherVideo(1)});
    document.getElementById('toVideo3').addEventListener('click', function() { classToggle(2),closeOtherVideo(2)});
    document.getElementById('toVideo4').addEventListener('click', function() { classToggle(3),closeOtherVideo(3)});

.container {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #cbc9c7;
    border-radius: 0.25rem;
}
 
.box {
    width: 100%;
    padding: 2rem;
    text-align: center;
}
 
 .myVideo {
     background-color: #000000;
     width: 440px;
     margin: 0 auto;
 }

.boxHeader {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
}
.video-menu {
    width: 440px;
    margin: 0 auto;
}

.boxHeader a {
    margin: 0.275rem;
}
  
.boxBottom {
    width: 100%;
}

.active {
    display: inline-block;
}

.hide {
    display: none;
}

    <div class="container">
        <div class="box">
            <div class="boxHeader">
                <div class="video-menu">
                    <a href="#" id="toVideo1" class="showVideo">video 1</a>
                    <a href="#" id="toVideo2" class="showVideo">video 2</a>
                    <a href="#" id="toVideo3" class="showVideo">video 3</a>
                    <a href="#" id="toVideo4" class="showVideo">video 4</a>
                </div>
            </div>
            <div class="boxBottom">
                <video id="video1" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/100818563_141790667457660_2448482643239076991_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=k6HEU2Q2YFgAX-jAG04&oe=5ED64CB4&oh=a7ac00f8b0f4eb2b680fb19bf6e56bff">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video2" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/101407297_578758382771748_4583302688695556657_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=3rAFHrkfrRsAX97dk3o&oe=5ED6B16D&oh=375b9fc3f99175160b6a308439bd5682">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video3" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/100635180_248551773073170_469297836861370934_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=VjO27SKjb9kAX_YE0Rs&oe=5ED66E98&oh=d301180c213df6954f5f06f32193389e">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video4" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/93155023_146306196903209_2004287997341602261_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=105&_nc_ohc=u4WdSeVhJFMAX9uYGeE&oe=5ED662F2&oh=758ea19e44728a476bb89716fee74170">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
            </div>
        </div>      
    </div>

I left in the example the addition of events via getElementById picking each link "manually". But you can leave more dry and elegant doing so:

    var sv = document.querySelectorAll('.showVideo');    
      sv.forEach((element, key) => {
        element.addEventListener('click', function(){
          classToggle(key),
          closeOtherVideo(key)
      })
    });

Answer 2

I do not work with wordpress but I believe that can work with jQuery in it normally, right? If you can you place a Listener for each link, in the click action on each link you display or Scoscoda a div, where you’ll open the video. Something more or less like this:

    <a id="link1" href="#">LINK1</a>
    <div id="divvideo1">
        <video id="video1" src="demo.mp4" controls autoplay >HTML5 Video </video> 
    </div>

 <a id="link2" href="#">LINK2</a>
    <div id="divvideo2">
        <video id="video2" src="demo.mp4" controls autoplay >HTML5 Video </video> 
    </div>

<script>

$('#link1').click(function(){

    $('#divvideo2').hide();
    $('#video2').pause();
    $('#divvideo1').show();
    $('#video1').play();

});

</script>

I didn’t test the code, there may be writing errors, but the idea (from what I understood) would be more or less this.