How to Embed YouTube video in WordPress without sacrificing speed

We all love videos on our website and so does google. Now when it comes to adding a video to our WordPress site, most of the users use YouTube to host the video and then embed it on their website. 

However, embedding YouTube videos in WordPress does not always work well for some users. Videos can take a long time to load and make the page render slow.

The solution to this problem is that you can embed YouTube videos in WordPress without sacrificing speed by using a WordPress plugin or a piece of code that will only load the YouTube video resources on clicking the video.

Here’s how you can embed YouTube videos to your WordPress site without making your page slow.

1. By using a plugin called “WP YouTube Lyte”. Reduces HTTP requests to YouTube.
2. By using a custom JavaScript code. Adds a static thumbnail and reduces HTTP requests.

I will show you how you can use both of these methods to embed a YouTube video to your WordPress site without compromising the load speed.

First, let’s see the easiest method which is by adding a lightweight plugin to our site.

Embed YouTube video using WP YouTube Lyte –

To begin, first, log in to the admin dashboard of your WordPress site. After logging in, go to Plugins>Add New from the admin menu on the left.

Now here in the search bar, search for “WP YouTube Lyte”. Install the plugin and activate it.

The plugin will start working right away after you activate it. But if you want to change some settings like video size and other settings then you can do that by going to Settings>WP YouTube Lyte.

Here you can change settings like Player Size, Player position, etc. You can also choose to add microdata to your Html so that the video shows up in google search. 

After changing the settings scroll down and click on “Save Changes”.

Now to add a YouTube video to your website, all you will need to do is “copy-paste the YouTube video link in the editor” and the plugin will automatically embed and change it in the frontend of your website.

This plugin helps a lot in reducing the number of HTTP requests your website makes to youtube.com which means that when you use this plugin for embedding a YouTube video to your website then there is little to no effect on the performance of your website.

Now let’s see the second method which is the recommended method.

Embed YouTube video with Preview image and load video on click –

Instead of using a plugin, I recommend you to use this method to embed a YouTube video as using a plugin can make your website heavy and also adds extra bloat to it.

So, here’s how this method is better than using a plugin. In this method the video is loaded with a static preview image, thus there are no extra HTTP requests to YouTube after the video preview image is loaded.

The video resources will only load when you click on them. If you don’t then no extra resources will be loaded.

Now let’s see the steps to set this up. To start first we’ll have to go to YouTube Embed Code Generator by Techbrij.

Here on the website, all you need to do is paste the YouTube video link in there and after pasting the link click on the “Preview and Generate Code” button.

NOTE: You can only use “www.youtube.com” links here and not “youtu.be” links.

Once the preview loads, you will need to scroll down a little and Copy the Second piece of code which is a piece of JavaScript code. Copy the JavaScript code from below.

<script> (function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        v[n].onclick = function() {
            var iframe = document.createElement("iframe");
            iframe.setAttribute("src", "//www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&rel=" + this.dataset.related + "&controls=" + this.dataset.control + "&showinfo=" + this.dataset.info);
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("id", "youtube-iframe");
            iframe.setAttribute("style", "width: 100%; height: 100%; position: absolute; top: 0; left: 0;");
            if (this.dataset.fullscreen == 1) {
                iframe.setAttribute("allowfullscreen", "");
            }
            while (this.firstChild) {
                this.removeChild(this.firstChild);
            }
            this.appendChild(iframe);
        };
    }
})(); 
< /script>

Copy this code and after that go back to your WordPress admin dashboard.

Here in the admin dashboard go to Appearance>Theme Editor.

Now here, click on the footer.php file. Scroll down to the bottom of the footer.php file and add the JavaScript code there before the closing body tag.

After adding the JavaScript code click on the Update File button and wait for it to Save. Once saved you will need to go to the post where you want to embed the youtube video.

Select the place where you want to add the YouTube video and add a new HTML block there.

In the HTML block copy-paste the first code that we generated from the techbrij website. After pasting the HTML code in the HTML block you’ll need to fix a small problem. You’ll need to change the HTTP to HTTPS in the Imgur image link at the bottom of the HTML code.

And that’s it, you can now preview the post to see if the YouTube video is loading properly or not. Now the YouTube video resources will only load if you click on the play button and will not hamper the performance of your website.

To embed more videos on your website, all you need to do is go to the Youtube Embed Generator By Techbrij and paste your YouTube video link there and click “Preview and Generate code”.

After that, copy the first HTML code and paste it into your website, change Imgur link from HTTP to HTTPS. And that’s it.

You don’t need to add the JavaScript code to your website again and again as we already added it to the theme file.

If you are thinking of adding YouTube videos to your WordPress website then make sure to use one of the methods shown above to do that, it is to make sure that embedding a YouTube video to your WordPress site won’t make it slow and reduce its performance.

If this post helped you in any way then make sure to comment down below and also share it with your friends. Thank you.

FAQ –

Which method should I use to embed a YouTube video to my WordPress website, Plugin or JavaScript Code?

If you are a beginner to WordPress and don’t want to mess with the code of your WordPress files then you can use the plugin. The plugin will allow you to add additional features to your YouTube embed which is good for SEO.

But if you are an advanced user then I will recommend you to use the JavaScript code method because using the plugin adds a lot of extra code to our WordPress website that we don’t need. Which can have some amount of impact on our WordPress website performance.

That’s why use the JavaScript code method if you want performance and use the plugin if you want both SEO and a little bit of performance.