Veja se lhe serve. Usa o mesmo princípio dos botões:
Imagino que esse exemplo possa lhe satisfazer
Eu mesclei os dois exemplos anteriores:
var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div h3');
var iframe = $('#videoGallery iframe');
var urls = [
"https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
"https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
"https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
"https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1",
"https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
"https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
"https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
"https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]
buttons.on('click', function (e) {
var index = buttons.get().indexOf(this);
var videoIndex = videos.eq(index);
iframe.attr("src", urls[index])
buttons.removeClass("selected")
$(this).toggleClass("selected")
videos.removeClass('yesDisplay');
videoIndex.toggleClass('yesDisplay');
$('body').animate({scrollTop:(videoIndex.offset().top)}, 200);
});
.video {
display:none;
}
.yesDisplay {
display:block !important;
}
img{
height: 80px
}
ul{
margin: 0;
padding: 0;
}
ul li{
display: block;
height: 30px;
line-height: 30px;
background: #333333;
margin: 0;
cursor: pointer;
padding-left: 10px;
color: #ffffff;
}
ul li:hover{
background: #666666;
color: #ffffff;
}
.selected{
background: #cccccc;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="videoGallery">
<ul>
<li>Vídeo 01</li>
<li>Vídeo 02</li>
<li>Vídeo 03</li>
<li>Vídeo 04</li>
<li>Vídeo 05</li>
<li>Vídeo 06</li>
<li>Vídeo 07</li>
<li>Vídeo 08</li>
</ul>
<div class="yesDisplay video">
<h3>Vídeo 01</h3>
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<p>Este é o vídeo 1:</p>
</div>
<div class="video">
<h3>Vídeo 02</h3>
<img src="http://goo.gl/ytbJn8" alt="">
<p>Este é o vídeo 2:</p>
</div>
<div class="video">
<h3>Vídeo 03</h3>
<img src="http://www.last-video.com/wp-content/uploads/2013/11/superbe-image-de-poissons-sous-l-eau.jpg" alt="">
<p>Este é o vídeo 3:</p>
</div>
<div class="video">
<h3>Vídeo 04</h3>
<img src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" alt="">
<p>Este é o vídeo 4:</p>
</div>
<div class="video">
<h3>Vídeo 05</h3>
<img src="http://www.conceptcarz.com/images/Citroen/2010-Citroen-Survolt-Concept-Image-01.jpg" alt="">
<p>Este é o vídeo 5:</p>
</div>
<div class="video">
<h3>Vídeo 06</h3>
<img src="http://i1008.photobucket.com/albums/af201/visuallightbox/Butterfly/8-1.jpg" alt="">
<p>Este é o vídeo 6:</p>
</div>
<div class="video">
<h3>Vídeo 07</h3>
<img src="http://michaeldaviddesign.com/themes/escape/files/stacks_image_85.jpg" alt="">
<p>Este é o vídeo 7:</p>
</div>
<div class="video">
<h3>Vídeo 08</h3>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_grGhfAqTFlVrVmKC3HJ9R6CuXPfgz6U6ikgOnfgHxiu38c13" alt="">
<p>Este é o vídeo 8:</p>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
Você pode perceber que ele vai carregar bem rapidamente, já que como eu disse no comentário os outros elementos carregam rapidamente. E é isso que acontece, ele não carrega todos os vídeos, e sim od outros elementos html. Há apenas um iframe
e é esse que mudará seu src
ao clicar em algum botão. Os outros (imagem e texto, no meu exemplo) mudará com o vídeo correspondente.
Outros exemplos
Primeiro caso
Primeiramente, para consegui a façanha de pausar o vídeo do youtube a partir do iframe
, você deve substituir os ?controls=0&showinfo=0
por ?enablejsapi=1
ao final das urls do seus vídeos, pois assim será possível a utilização a api que possibilita essas funções.
Com isso basta selecionar o iframe
desejado com o atributo contentWindow
e aplicar a ele o:
.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
// pauseVideo - outra opção seria o playVideo
E para que o vídeo apareça como no início:
.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
Entretando, neste último caso, além do ?enablejsapi=1
deve se acrescentar após &version=3&playerapiid=ytplayer
.
Exemplo funcionando: JsFiddle
Segundo caso
Vale lembrar que essa API é própria do youtube. Cada host (Vimeo, Uol, Dailymotion, Youtube...) vai ter a sua própria. Como pode ser observado nesse exemplo: https://css-tricks.com/play-button-youtube-and-vimeo-api/.
Entretando, há uma maneira genérica de parar os vídeos independente de suas origens. Basta resetar os seus src
. Isso irá servir apenas para parar, como já foi dito. Contudo, exigirá um desempenho maior e fará com que o aparecimento do vídeo não seja instantâneo.
No exemplo abaixo o vídeo 01 pertence ao Vimeo, já o vídeo 02 pertence ao Dailymotion e carregam normalmente. Para isso, no seu iframe
você deve capturar o código para o embed
na área voltada a isso no próprio site do host.
Exemplo: JsFiddle
Terceiro caso
Eu criei uma array
com as urls de cada vídeo. Depois acessei da mesma forma que nos iframes
por meio do index
dos buttons
.
var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div p');
var iframe = $('#videoGallery div iframe');
var urls = [
"https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
"https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
"https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
"https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]
function pauseVideo() {
var iframes = document.getElementsByTagName("iframe");
iframes[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
buttons.on('click', function() {
var index = buttons.get().indexOf(this);
var videoIndex = videos.eq(index);
titles.html("Vídeo " + (parseFloat(index)+1));
iframe.attr("src", urls[index])
$('body').animate({
scrollTop: (videos.offset().top)
}, 200);
buttons.removeClass("selected")
$(this).toggleClass("selected")
pauseVideo();
});
.yesDisplay {
display: block !important;
}
ul {
margin: 0;
padding: 0;
}
ul li {
display: block;
height: 30px;
line-height: 30px;
background: #333333;
margin: 0;
cursor: pointer;
padding-left: 10px;
color: #ffffff;
}
ul li:hover {
background: #666666;
color: #ffffff;
}
.selected {
background: #cccccc;
color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="videoGallery">
<ul>
<li>Vídeo 01</li>
<li>Vídeo 02</li>
<li>Vídeo 03</li>
<li>Vídeo 04</li>
</ul>
<div class="yesDisplay">
<p>Video 1</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1" frameborder="0" id="IframeVideo1" allowfullscreen></iframe>
</div>
</div>