Site icon MIND Development & Design, LLC

How to Defer Parsing of Javascript for YouTube Iframe Videos in WordPress

Andrew Gehman
laptop with holographic image of video above the keyboard

One of the best ways to improve page speed scores is to defer the parsing of your Javascript files that aren’t required for the initial page render. One of the big culprits of this render-blocking Javascript is embedded YouTube videos. When you embed a YouTube video, it will often end up loading additional external Javascript files which can significantly slow the loading of your site. We can combat this by “Lazy Loading” our YouTube videos. Here’s how to defer parsing of Javascript for YouTube iframe videos in WordPress.

How to Defer Parsing of Javascript for YouTube Iframe Videos in WordPress

The key to making this work is a little bit of editing of the YouTube embed code. This will prevent the video from loading during the initial page render.

  1. We need to remove the link from the iframe’s src attribute, so we are left with src=””
  2. add a data-src attribute
  3. add the link from the original src attribute to the data-src attribute

Let’s take a closer look at how to defer parsing of Javascript for a couple of methods you may use for loading videos in WordPress:

Embedding a YouTube Iframe File in Your Template

If you are embedding an iframe directly into your WordPress template file, just copy the embed code from YouTube, and follow the key steps above to create an empty src attribute and fill the new data-src attribute with the link value. 

<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/Hpv3jqmYRjk" frameborder="0" allowfullscreen></iframe>

If we leave the code as is now, the video will not load. We need a little javascript to help us out. You’ll want to add this to a .js file and enqueue it along with the rest of your Javascript files in functions.php.

function init() {
  var vidDefer = document.getElementsByTagName('iframe');
  for (var i=0; i<vidDefer.length; i++) {
    if(vidDefer[i].getAttribute('data-src')) {
      vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

After the browser window finishes loading, this code will find all the iframes on your site (or on whichever pages are loading this script), and if the data-src exists, copy that attribute to the src attribute. By default, a YouTube video embed code doesn’t have an ID or class name, so this code should work for all YouTube videos without any adjustment.

If you only have a single video on your site, you don’t need to loop through the iframes. You could just set an ID or class name on the iframe, grab the ID or class name of the video iframe, and then simply get and set the Attribute of that single item. 

<iframe id=”youtube_video” width="560" height="315" src="" data-src="https://www.youtube.com/embed/Hpv3jqmYRjk" frameborder="0" allowfullscreen></iframe>

Here is an example using jQuery: 

var newsrc = $("#youtube_video").attr('data-src');
$("#youtube_video").attr('src', newsrc );

Embedding Video Using Advanced Custom Fields oEmbed

Many WordPress developers rely on the popular Advanced Custom Fields (ACF) plugin to create custom fields that make adding content much easier for clients.

To add video embeds with Advanced Custom Fields, you could use a regular ACF text input and just manually set the data-src and empty src attributes. This is less than ideal as the average user may not want to have to remember this process every time they want to embed a new video. If you want to avoid having to do this manually, we can use an oEmbed field.

The downside with the oEmbed field is we need a little more code magic to copy the original src code to the data-src set the src attribute to be empty. Fortunately, the ACF documentation gives us an easy way to do this.  

<?php //from https://www.advancedcustomfields.com/resources/oembed/
$iframe = get_field( 'video' );
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1]; 
?>

Using PHP’s preg_match function, we can identify the src and set it to the $src variable. Then we can re-create the iframe, remove the src, and set the data-src attribute to the src we grabbed form the oEmbed.  

<?php $newiframe = '<iframe id="youtube_video" src="" data-src="'. $src .'" frameborder="0" allowfullscreen></iframe>'; ?>

Using these methods you should see a nice bump in your page speed scores.

Additional Resources:

Deferring Videos

 

Exit mobile version