Embedding YouTube videos directly into your page can increase the load time significantly, especially when multiple videos are embedded. One solution is to load thumbnail images instead, and then load the videos only when clicked.<\/p>\n
\/* Generate post-load HTML wrapper for a YouTube video. *\/\r\nfunction myprefix_youtube_postload($youtube_id, $thumb_size = 'hq') {\r\n $thumb_sizes = array(\r\n 'hq' => 'hqdefault', \/\/ 480x360\r\n 'sd' => 'sddefault', \/\/ 640x480\r\n 'med' => 'mqdefault', \/\/ 320x180\r\n 'max' => 'maxresdefault' \/\/ 1920x1080\r\n );\r\n if (!in_array($thumb_size, array_keys($thumb_sizes))) {\r\n $thumb_size = 'hq';\r\n }\r\n $html = '<div class=\"youtube postload\" data-embedid=\"'.esc_attr($youtube_id).'\" data-thumbsize=\"'.esc_attr($thumb_sizes[$thumb_size]).'\"><div class=\"play-button\"><\/div><\/div>';\r\n return $html;\r\n}<\/pre>\nThe above function doesn’t do much by itself. The most important parts are the “postload” class and the two data attributes, which will be used by JavaScript to load the thumbnail and video.<\/p>\n
In a JavaScript file, add the following code. You may need to enqueue a new script if you don’t already have one available for editing.<\/p>\n
jQuery(document).ready(function($) {\r\n \/* Lazy-load YouTube videos. This uses mostly non-jQuery code because that's what we copied from\r\n * the source: https:\/\/webdesign.tutsplus.com\/tutorials\/how-to-lazy-load-embedded-youtube-videos--cms-26743\r\n * This might lead to some cross-browser compatiblity issues, but should run faster than jQuery.\r\n * If we have browser issues, just migrate this to jQuery.\r\n * One major change is the use of a background image for the thumbnail instead of creating an\r\n * img element. This allows for easier vertical centering and positioning.\r\n *\/\r\n var youtubes = document.querySelectorAll( \".youtube.postload\" );\r\n for (var i = 0; i < youtubes.length; i++) {\r\n \/* Load the thumbnail as background image, using selected size *\/\r\n var source = \"https:\/\/img.youtube.com\/vi\/\"+ youtubes[i].dataset.embedid +\"\/\"+youtubes[i].dataset.thumbsize+\".jpg\";\r\n youtubes[ i ].addEventListener( \"load\", function() {\r\n youtubes[ i ].style.backgroundImage = \"url('\"+source+\"')\";\r\n }( i ) );\r\n \r\n \/* Add click events to all of the elements to load the iframe *\/\r\n youtubes[i].addEventListener( \"click\", function() {\r\n var iframe = document.createElement( \"iframe\" );\r\n \r\n iframe.setAttribute( \"frameborder\", \"0\" );\r\n iframe.setAttribute( \"webkitallowfullscreen\", \"webkitallowfullscreen\" );\r\n iframe.setAttribute( \"mozallowfullscreen\", \"mozallowfullscreen\" );\r\n iframe.setAttribute( \"allowfullscreen\", \"allowfullscreen\" );\r\n iframe.setAttribute( \"src\", \"https:\/\/www.youtube.com\/embed\/\"+ this.dataset.embedid +\"?rel=0&showinfo=0&autoplay=1\" );\r\n \r\n this.innerHTML = \"\";\r\n this.appendChild( iframe );\r\n } );\r\n }\r\n});<\/pre>\nYou’ll need to add some styles to display a play button over top of the thumbnails. These styles can be changed to fit your needs.<\/p>\n
.youtube {\r\n display: block;\r\n margin:0;\r\n background-color: #000;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n background-size:100% auto;\r\n background-position:0 center;\r\n background-repeat:no-repeat;\r\n width:335px;\r\n max-width: 100%;\r\n height:200px;\r\n}\r\n.youtube img {\r\n width: 100%;\r\n top: -16.84%;\r\n left: 0;\r\n opacity: 0.7;\r\n}\r\n.youtube .play-button {\r\n width: 90px;\r\n height: 60px;\r\n background-color: #333;\r\n box-shadow: 0 0 30px rgba( 0,0,0,0.6 );\r\n z-index: 1;\r\n opacity: 0.8;\r\n border-radius: 6px;\r\n}\r\n.youtube .play-button:before {\r\n content: \"\";\r\n border-style: solid;\r\n border-width: 15px 0 15px 26.0px;\r\n border-color: transparent transparent transparent #fff;\r\n}\r\n.youtube img,\r\n.youtube .play-button {\r\n cursor: pointer;\r\n}\r\n.youtube img,\r\n.youtube iframe,\r\n.youtube .play-button,\r\n.youtube .play-button:before {\r\n position: absolute;\r\n}\r\n.youtube .play-button,\r\n.youtube .play-button:before {\r\n top: 50%;\r\n left: 50%;\r\n transform: translate3d( -50%, -50%, 0 );\r\n}\r\n.youtube iframe {\r\n height: 100%;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n}<\/pre>\nNow you can call the myprefix_youtube_postload()<\/code> function to output the thumbnail in your code. All you need to pass is the YouTube ID and the optional thumbnail size.\u00a0 If you are using data that is input in the back-end by the end-user, it is probably a good idea to make sure they aren’t pasting the full YouTube URL into that data field.\u00a0 You can use the following to extract the YouTube ID from user input, if necessary. It will attempt to extract the ID from commonly-used YouTube URLs.<\/p>\nfunction myprefix_extract_youtube_id($url) {\r\n preg_match(\"\/^(?:http(?:s)?:\\\/\\\/)?(?:www\\.)?(?:m\\.)?(?:youtu\\.be\\\/|youtube\\.com\\\/(?:(?:watch)?\\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\\\/))([^\\?&\\\"'>]+)\/\", $url, $matches);\r\n return $matches[1];\r\n}<\/pre>\nYou can also create a shortcode to utilize this functionality in your posts\/pages:<\/p>\n
function myprefix_youtube_embed_shortcode($atts) {\r\n if (!isset($atts['id'])) {\r\n return false;\r\n }\r\n return myprefix_youtube_postload($atts['id'], $atts['thumb_size']);\r\n}\r\n\r\nfunction myprefix_shortcode_plugins_loaded() {\r\n add_shortcode( 'myprefix_youtube_embed', 'myprefix_youtube_embed_shortcode' );\r\n}\r\nadd_action( 'plugins_loaded', 'myprefix_shortcode_plugins_loaded' );<\/pre>\n