O seu problema consiste no seguinte:
"Dada uma lista de links, ao clicá-los, abaixo do item clicado será exibido um vídeo"
Para isso, você precisará controlar bem os blocos de exibição da página, para que os vídeos fiquem bem alinhados em relação aos links.
Breve comentário
Eu optei por fazer um menu horizontal (sem apelo visual), mas que o vídeo apareça abaixo dos itens logo que clicado. Você pode dispor de outro modo, por exemplo, pôr cada par item-video em uma linha. O fato é que ao clicar num link, após aberto o primeiro vídeo, o anterior logo se fechará e pausará.
A solução que eu sugiro, tem alguns pontos que vale apena você olhar com mais calma. São eles:
Solução:
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>
Deixei no exemplo a adição dos eventos via getElementById pegando cada link "manualmente". Mas você pode deixar mais enxuto e elegante fazendo assim:
var sv = document.querySelectorAll('.showVideo');
sv.forEach((element, key) => {
element.addEventListener('click', function(){
classToggle(key),
closeOtherVideo(key)
})
});
display:none
, nessa pergunta existem respostas para mostrar um div quando clicar em um link. A lógica é a mesma, se tiver alguma dúvida pode editar a sua pergunta explicar o que não conseguiu e se possível incluir algum código (mesmo que não funcionando) de como tentou fazer.function destroyVideo(objeto){ var url = $("#video1").attr('src'); $("#video1").attr('src', ''); $("#video1").attr('src', url); }