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 --> <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); }; } </script> |
No comments:
Post a Comment