Embed YouTube Videos with JavaScript

This explains how you can embed YouTube videos using the Google+ approach – only the video thumbnail is loaded along with the page and the actual player loads when the user hits the play button.

 

<!-- You can embed  multiple Youtube videos on a page -->
<div class="youtube" id="LcIytqkbdlo" style="width:560px; height: 315px;">
</div>

<div class="youtube" id="_Jmisv1Spck" style="width:560px; height: 315px;">
</div>

<!-- Include the JavaScript only once -->

&lt;script> 

// Find all the YouTube video embedded on a page
var videos = document.getElementsByClassName("youtube"); 

for (var i=0; i<videos.length; i++) {
  
  var youtube = videos[i];
  
  // Based on the YouTube ID, we can easily find the thumbnail image
  var img = document.createElement("img");
  img.setAttribute("src", "http://i.ytimg.com/vi/" 
                          + youtube.id + "/hqdefault.jpg");
  img.setAttribute("class", "thumb");
  

  // Overlay the Play icon to make it look like a video player
  var circle = document.createElement("div");
  circle.setAttribute("class","circle");  
  
  youtube.appendChild(img);
  youtube.appendChild(circle);
  
  // Attach an onclick event to the YouTube Thumbnail
  youtube.onclick = function() {

    // Create an iFrame with autoplay set to true
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src",
          "https://www.youtube.com/embed/" + this.id 
        + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1"); 
    
    // The height and width of the iFrame should be the same as parent
    iframe.style.width  = this.style.width;
    iframe.style.height = this.style.height;
       
    // Replace the YouTube thumbnail with YouTube HTML5 Player
    this.parentNode.replaceChild(iframe, this);

  }; 
}

&lt;/script>
&nbsp;