A Pen by Justin Farrow.

A-Pen-by-Justin-Farrow.markdown

A Pen by Justin Farrow

A Pen by Justin Farrow on CodePen.

License.

index.html

<h1>JustiNYC Music videos</h1>

<ul class="youtube_videos">
  <li class="youtube" id="eXCZu6KT0jw"></li>
  <li class="youtube" id="1SUGUx0aW58"></li>
  <li class="youtube" id="QMzc5tYN3GU"></li>
  <li class="youtube" id="TfuSfv677zU"></li>
  <li class="youtube" id="nqY2R4FFWfk"></li>
  <li class="youtube" id="kvpx_P9emns"></li>
  <li class="youtube" id="6m_M8Z5ELrc"></li>
  <li class="youtube" id="9wNOSBxZ7HI"></li>
  <li class="youtube" id="0qwT7URcIao"></li>
  <li class="youtube" id="hXdgT1GjpPc"></li>
  <li class="youtube" id="hBaQyEPkLWQ"></li>
  <li class="youtube" id="NKCiqYLfjds"></li>
  <li class="youtube" id="Iul6DQAIE68"></li>
  <li class="youtube" id="RYZ8TFDXIOA"></li>
  <li class="youtube" id="1arOvsv6sfM"></li>
  <li class="youtube" id="7Nd-62UnY2M"></li>
  <li class="youtube" id="ukEA-urqDM8"></li>
  <li class="youtube" id="nYvaw5oXcUc"></li>
  <li class="youtube" id="lWZeHA9TRpQ"></li>
  <li class="youtube" id="m76xXQgKO-o"></li>
</ul>

script.js

// Loop selectors
var videos = document.querySelectorAll(".youtube");  
for (var i=0; i<videos.length; i++) {
  var youtube = videos[i];
  // Get function
  getVideos(youtube);
}

// Get videos function
function getVideos(el){
  var img = document.createElement("img");
  // Get images
  img.setAttribute('src', 'http://i.ytimg.com/vi/'+el.id+'/hqdefault.jpg');
  // Add class to img
  img.setAttribute('class', 'thumb');
  // Make div to embed videos
  var video = document.createElement("div");
  // Remove this if you like
  video.setAttribute("class","video_here");  
  // Insert tags
  el.appendChild(img);
  el.appendChild(video);
  // On click get video
  el.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'); 
    // Remplace img for video
    this.parentNode.replaceChild(iframe, this);
  },false);  
}

style.css

@import url(http://fonts.googleapis.com/css?family=Racing+Sans+One);
body{
  background:#a12712;
  margin:0 auto;
  padding:0;
  text-align:center;
}
h1{
  text-align:center;
  color:#ecf0f1;
  font-family:'Racing Sans One', cursive;
  text-shadow:0 2px 2px #0c0e50;
}
.youtube_videos{
  list-style:none;
  margin:0 auto;
  display:block;
  padding:0;
}
.youtube_videos .youtube{
  display:inline-block;
  margin-bottom:1em;
  margin-right:0.5em;
  margin-left:0.5em;
  margin-top:0;
  
}
.youtube,.thumb{
  width:380px;
  height:250px;
  cursor:pointer;
  position:relative;
  -webkit-box-shadow:0 0.5px 2px #1D242B;
  -moz-box-shadow:0 0.5px 2px #1D242B;
  box-shadow:0 0.5px 2px #1D242B;
}
.youtube_video{
  width:385px;
  height:250px;
}
.thumb,.youtube_video{
  padding:5px;
  background:#34495e;
  border:0;
  outline:0;
}
.youtube:after{
  content:"PLAY THIS VIDEO";
  position:absolute;
  top:5px;
  left:5px;
  width:370px;
  height:240px;
  padding:0;
  margin:0;
  padding:5px;
  background:rgba(38, 180, 174, 0.66);
  text-align:center;
  line-height:250px;
  font-family:'Racing Sans One', cursive;
  color:transparent;
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}
.youtube:hover:after{
  top:110px;
  left:110px;
  width:165px;
  height:40px;
  line-height:40px;
  background:#34495e;
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
  color:#ecf0f1;
}


/* = Responsive comming soon :)
---------------------------------*/
/* Desktop */
@media (min-width:980px) {}
/* Mobile */
@media (max-width:480px) {}
/* Tablet */
@media (max-width:767px) {}
@media (min-width:768px) and (max-width:979px) {}