Eu estou a começar a desenvolver uma galeria de videos no qual vou fazer upload para o GitHub para quem quiser fazer download e uso dela.
Eu tenho uma lista da seguinte maneira:
<ul>
<li><span class="everyVideo ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
<li><span class="everyVideo ytVideo" data-videoID="El3IZFGERbM">Video 1</span></li>
<!-- continua... -->
</ul>
Em cada item da lista, irei pegar o data-videoID="El3IZFGERbM"
para poder criar uma caixa/div de video, onde o vídeo será gerado para reprodução.
No entanto da maneira que estou a fazer, só estou a conseguir pegar o primeiro data-video
da lista:
var videoID = $('.everyVideo').attr('data-videoID');
Eu até já tentei usar o .each()
nesta var
acima, mas não estou conseguindo ter resultados positivos.
var videoID = $('.everyVideo').each(function (index, value){ $(this).attr('data-videoID'); });
Abaixo vou colocar um snippet de um excerto do código em que estou a trabalhar no momento no qual estou tentando resolver este problema:
var ytTarget = $('#videoGallery .ytVideo');
var videoID = $('.everyVideo').attr('data-videoID');
// Video and thumnnails incorporation vars
var ytVideo = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');
var ytThumb = $('<img src="http://img.youtube.com/vi/'+ videoID +'/default.jpg"/>');
$(document).ready(function() {
if ($('.everyVideo').hasClass('ytVideo')){
$('.ytVideo').append(ytThumb);
} else {
}
});
// Youtube Video
ytTarget.click(function(){
$('#meuVideo, .nowPlaying').remove();
ytVideo.insertAfter('.vidPlayer').hide().slideDown("fast");
});
// Fechar Videos
$('#close').click(function(){
$('#meuVideo, .nowPlaying').remove();
});
.everyVideo, #close {cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="videoGallery">
<div class="vidPlayer"></div>
<ul>
<li><span class="everyVideo ytVideo" data-videoID="6AmRg3p79pM">Video 1</span></li>
<li><span class="everyVideo ytVideo" data-videoID="El3IZFGERbM">Video 4</span></li>
<li><span id="close">Fechar Tudo</span></li>
</ul>
</div>
Na segunda imagem que aparece, tanto a imagem como o video que aparece ao clicarmos no elemento, deveria ser um video diferente. Como faço para resolver isso?
Quaisquer melhorias de código serão bem-vindas e uma nota (juntamente com o link da sua conta GitHub/site) será incluída no projeto pela sua ajuda! Obrigado.