Add Youtube videos to Wordpress without hampering the page speed
The Problem
I will start with showing you an waterfall(with the help of GTMetrix) chart of an Wordpress website having Youtube video embedded.
In the above photo we are seeing the base.js file(s) from youtube crossed the green line on the left and creating delay of 1.3 second. Plus it will start loading the youtube video in background even if its not on auto play mode.
Which increase the page loading time dramatically, which is NOT good for user experience and for google page speed indexing.
The Solution
We need to find a way to disable initial loading of Youtube video and script(s) during page load. Video and script(s) should be initiated only after clicking on a video.
To achieve above mentioned goals we need to add following blocks of code to functions.php of our currently active theme.
/**
* Adding css for video block
*/
add_action('wp_footer',function(){
echo '<style>
.youtube {margin-bottom: 30px;position: relative;padding-top: 56.25%;overflow: hidden;cursor: pointer;}
.youtube img {width: 100%;top: -16.84%;left: 0;}
.youtube .play-button {width: 90px;height: 60px;background-color: #333;box-shadow: 0 0 30px rgba( 0,0,0,0.6 );/*edit the z-index in needed*/z-index: 1;opacity: 0.8;border-radius: 6px;}
.youtube .play-button:before {content: "";border-style: solid;border-width: 15px 0 15px 26.0px;border-color: transparent transparent transparent #fff;}
.youtube img,.youtube .play-button {cursor: pointer;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before {position: absolute;}
.youtube .play-button,.youtube .play-button:before {top: 50%;left: 50%;transform: translate3d( -50%, -50%, 0 );}
.youtube iframe {height: 100%;width: 100%;top: 0;left: 0;}
</style>';
});
/**
* adding js for video block
*/
add_action('wp_footer',function(){
echo '<script>
/* youtube */
let youtube = document.querySelectorAll( ".youtube" );
for (let i = 0; i < youtube.length; i++) {
let source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
/*Load the image asynchronously*/
let image = new Image();
image.src = source;
image.addEventListener( "load", function() {youtube[ i ].appendChild( image );
}( i ) );
/*On click envents - create an iframe*/
youtube[i].addEventListener( "click", function() {
let iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = ""; this.appendChild( iframe );
} );
}
</script>';
});
/**
* adding php function for wordpress shortcode
*/
add_shortcode('wpc_youtube',function($atts){
$data_embed = $atts['id'];
return '<div class="youtube" data-embed="'. $data_embed .'"><div class="play-button"></div></div>';
});
Now to add youtube video to posts/pages we have use following shortcode instead of default media manger.
[wpc_yotuebe id="-9pfHJt5bgM"]
To get the video ID we need copy and paste it from the url of the Youtube video.
Thanks for reading