How to use '.each()' in a variable to get multiple '.attr()' from a list?

Question

I’m starting to develop a video gallery that I’m going to do upload for Github for anyone who wants to download and use it.

I have a list as follows:

<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>

On every item on the list, I’ll get the data-videoID="El3IZFGERbM" to be able to create a video box/div, where the video will be generated for playback.

However the way I’m doing, I’m only getting the first one data-video of the list:

var videoID = $('.everyVideo').attr('data-videoID');

I even tried to use the .each() in this var above, but I’m not getting positive results.

var videoID = $('.everyVideo').each(function (index, value){ $(this).attr('data-videoID'); });

Below I’ll put a snippet of an excerpt of the code I’m working on at the moment I’m trying to solve this problem:

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&amp;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>

In the second image that appears, both the image and the video that appears when we click on the element, should be a different video. How do I fix it?

Any code improvements will be welcomed and a note (along with your Github account/website link) will be included in the project for your help! Thank you.

Answer 1

Make an iteration from '.ytVideo' and append that element within the .each. Something like that:

var ytTarget = $('#videoGallery .ytVideo');

$(document).ready(function() {
    $('.ytVideo').each(function() {
        var videoID = $(this).attr('data-videoID');
        var ytVideo = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoID + '?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');
        var ytThumb = $('<img src="http://img.youtube.com/vi/' + videoID + '/default.jpg"/>');
        $(this).append(ytThumb);
        $(this).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>