Текущая версия на 20:07, 31 марта 2016

// gplus-youtubeembed - Makes embedded YouTube video iframes Google+ style to improve page loading speed.
// Copyright (c) 2013 by Arun - http://www.skipser.com
// Licensed under the GNU LGPL license: http://www.gnu.org/copyleft/lesser.html
// For usage details, read - http://www.skipser.com/510

// Call this function at the end of the closing </body> tag.
function optimizeYouTubeEmbeds() {
    // Get all iframes
    var frames = document.getElementsByTagName( 'iframe' );
    
    // Loop through each iframe in the page.
    for ( var i = 0; i < frames.length; i++ ) {

        // Find out youtube embed iframes.
        if ( frames[ i ].src && frames[ i ].src.length > 0 && frames[ i ].src.match(/http(s)?:\/\/www\.youtube\.com/)) {

            // For Youtube iframe, extract src and id.
            var src=frames[i].src;
            var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
            var id=(src.match(p) ? RegExp.$1 : false);
            if(id == false) { continue;}
            
            // Get width and height.
            var w=frames[i].width;
            var h=frames[i].height;
            if(src == '' || w=='' || h=='') {continue;}
            
            // Thease are to position the play button centrally.
            var pw=Math.ceil(w/2-38.5);
            var ph=Math.ceil(h/2+38.5);    
            
            // The image+button overlay code.
            var code='<div style="width: '+w+'px !important; height: '+h+'px !important; display: inline-block !important; position: relative; left: 0px !important; top: 0px !important;"><a href="#" onclick="LoadYoutubeVidOnPreviewClick(\''+id+'\','+w+','+h+');return false;" id="skipser-youtubevid-'+id+'"><img src="http://i.ytimg.com/vi/'+id+'/hqdefault.jpg" style="width:'+w+'px !important; height: '+h+'px !important; position: absolute; left: 0px !important; top: 0px !important;" /><div style="background: url(/static/div_play.png) no-repeat scroll 0 0; width: 64px !important; height: 64px !important; position: absolute; margin: -32px 0 0 -32px; left: 50%; top: 50%; z-index:5; display: inline-block !important;"></div></a></div>';
            // Replace the iframe with a the image+button code.
            var div = document.createElement('div');
            div.innerHTML=code;
            div=div.firstChild;
            frames[i].parentNode.replaceChild(div, frames[i]);
			i--;
        }
    }
}
// Replace preview image of a video with it's iframe.
function LoadYoutubeVidOnPreviewClick(id,w ,h) {
    var code='<iframe src="https://www.youtube.com/embed/'+id+'/?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1" width="'+w+'" height="'+h+'" frameborder=0 allowfullscreen style="border:1px solid #ccc;" ></iframe>';
    var iframe = document.createElement('div');
    iframe.innerHTML=code;
    iframe=iframe.firstChild;
    var div=document.getElementById("skipser-youtubevid-"+id);
    div.parentNode.replaceChild( iframe, div)
}

optimizeYouTubeEmbeds();