18 March 2017
Although it easy to embed youtube videos but you will be surprised of the increase in loading time of your webpage.
So i created a wordpress plugin that will show a thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail. You will find a significant change in loading time especially if your webpage contain many youtube videos. You can check & download the plugin at github.
Also You can check the code here:
<?php
/*
Plugin Name: Fast Youtube Videos
Plugin URI: http://clivern.com
Description: WordPress Plugin to Increase Loading Time of Youtube Videos
Version: 1.0.0
Author: Clivern
Author URI: http://clivern.com
License: GPL
*/
/**
* If this file is called directly, abort.
*/
if ( !defined('WPINC') )
{
die;
}
/*
* To Use this plugin just insert
* <div class="cliv-youtube-player" data-id="GAFZcYlO5S0"></div>
* in your post content
*/
class CliverFastYTVideos
{
function init()
{
add_action('wp_head', array(
&$this,
'headerPrint'
));
add_action('wp_footer', array(
&$this,
'footerPrint'
));
add_filter('the_content', array(
&$this,
'filterContent'
));
}
/**
* Print code in header
*
* @since 1.0
* @access public
*/
public function headerPrint()
{
?>
<style>
.cliv-youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.cliv-youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.cliv-youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
.cliv-youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.cliv-youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
</style>
<?php
}
/**
* Print code in footer
*
* @since 1.0
* @access public
*/
public function footerPrint()
{
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("cliv-youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
console.log(v[n].dataset.id);
if ( (v[n].dataset.id.indexOf('?') > -1) && (v[n].dataset.id.indexOf('=') > -1) ){
var id_arr = v[n].dataset.id.split('?');
v[n].dataset.id = id_arr[0];
}
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
<?php
}
public function filterContent($content)
{
$content = preg_replace('/<iframe.*?src=".*?youtube.com\/embed\/(.*?)".*?<\/iframe>/si','<div class="cliv-youtube-player" data-id="$1"></div>', $content);
return $content;
}
}
$clivern_fast_yy_video = new CliverFastYTVideos();
$clivern_fast_yy_video->init();