JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="youtube_videos">
    <li class="youtube" id="GeDJAKvcZ9o" data-line="honest"> </li>
</ul>

CSS

#maincontent ul.youtube_videos {
    height: 0;
    list-style: outside none none;
    margin: 0;
    margin-bottom: 5% !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    overflow: hidden;
    padding: 37.5% 0;
    position: relative;
    }
    .thumb {
    cursor: pointer;
    margin-top: -37.5%;
    position: relative;
    width: 100%;
    }
    .youtube{
    cursor:pointer;
    }
    .youtube_video {
    background: #000 none repeat scroll 0 0;
    border: medium none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }
    .youtube[data-line]::after {
    color: transparent;
    content: attr(data-line);
    display: block;
    font-family: "Tungsten A","Tungsten B",HelveticaNeueCondensed,HelveticaNeue-Condensed,"Helvetica Neue Condensed",HelveticaNeueRomanCondensed,HelveticaNeue-Roman-Condensed,"Helvetica Neue Roman Condensed","Arial Narrow",HelveticaNeue,"Helvetica Neue",HelveticaNeueRoman,HelveticaNeue-Roman,"Helvetica Neue Roman",Helvetica,Tahoma,Geneva,Arial,sans-serif;
    font-size: 2em;
    height: 100%;
    margin: 0;
    padding-top: 30%;
    line-height:100%;
    position: absolute;
    text-align: center;
    top: 0;
    -moz-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    width: 100%;
    }
    .youtube:hover::after {
    background: #d00 none repeat scroll 0 0;
    color: #ecf0f1 ;
    opacity: 0.7;
    }

JavaScript

var videos = document.querySelectorAll(".youtube");

//this works
for (var i = 0; i < videos.length; i++) {
    getVideos(videos[i]);
}

//this is where i'm stumped
//$(".youtube").each(function(i, youtube){
//    getVideos(youtube[i]);
//});    



// Get Youtube Videos function
function getVideos(player) {
    //create img
    var img = document.createElement("img");
    // Get Highest quality thumbnail from youtube id
    img.setAttribute('src', 'http://i.ytimg.com/vi/' + player.id + '/sddefault.jpg');
    // Add  .thumb class to thumbnail
    img.setAttribute('class', 'thumb');
    // Make div to embed videos
    var video = document.createElement("div");
    // Insert tags
    player.appendChild(img);
    player.appendChild(video);
    // On click get youtube video (Autoplaying and User Controls on)
    player.addEventListener
        ('click', function () {
            var iframe = document.createElement("iframe");
            iframe.setAttribute('class', 'youtube_video');
            iframe.setAttribute('src', 'http://www.youtube.com/embed/' + this.id + '?autoplay=1&autohide=1&	            border=0&wmode=opaque&enablejsapi=1&rel=0');
            // Remplace thumbnail with video
            this.parentNode.replaceChild(iframe, this);
        },
        false);
}