BLOG | categories | wordpress, page speed

How to Embed Youtube Videos on WordPress

By Steve Founder of PageDart

We are going to look at how to embed youtube videos on WordPress step by step.

We will look at how you can add a video with the WordPress blocks editor and why you should not use it!

I will show you the correct way without slowing down your site.

Let's dive in.

Embed a Youtube Video

If you are using the latest version of WordPress then you are using the new editor which uses blocks. This allows you to embed content such as Youtube videos to the page.

If you are on an older version of WordPress then jump down to the embed code section.

In this example, we are going to use this video of Iceland:

Go ahead and open up a new Post. Then to add a Youtube video using blocks and click on the plus symbol:

Select the “Embeds” section, then choose Youtube.

This will bring up a new box that is asking for a Youtube video URL. Add this URL into the box and click “Embed”:

When you hit publish the video will be on your page.

But wait!

Here is what mine looks like when published:

Not great. The video does not fit the screen making it difficult to see the whole video.

We can do better after all Youtube has an embed code, let's look at this next.

Youtube Embed Code

What is an embed code?

This is a special HTML code that you can copy from Youtube and paste into your blog post.

To do this you need to visit the Youtube video that you want to embed from Youtube. We will use the same video as before:

The first step is to visit the page on Youtube. To get the embed code you need to click on the share button:

One of the options is “embed” so click on this button:

You will then see the embed code which looks like this:

Copy the whole section.

You can take this embed code and paste it into the WordPress editor. Go back to the blog post and choose the plus sign again.

This time you want to select formatting from the menu:

Then select the “Custom HTML”:

This will bring up a text box where you can paste the embed code. Once pasted it will look something like this:

Press update on the post and visit the page. The video should be in a better format and is easy to see. Much better than before:

We are almost done. There is one more thing we need to check, page speed.

Youtube and Page Speed

Youtube videos will slow down your website to see this in action we can test it with Page Speed Insights. Page Speed Insights is a free tool from Google that allows us to check the page speed of a single web page.

It runs a report that will give us a score out of 100. 100 is the fastest and 0 is the slowest. We want to make sure that the pages we are building stay out of the red zone that is a score between 0-49. As a general rule, we want a page that is 75+ and that should be your goal.

Let's do a test of the page with the Youtube video:

As you can see it is in the Red Zone. This means that Google will categorize this page as slow and penalize it in the search rankings.

So that we have a benchmark let's look at the same page but I will remove the video:

The Youtube video slows the page down by 34 points! What does this mean? Well, the report also gives a total number of seconds the page takes to load. With the video, it takes 8.9 seconds and without 4.8. This is almost double the amount of time to load all because we have added a video.

You can see that if you have 5 of 6 videos on a page then this can slow it down and Google will mark the page as slow.

How can we keep the page speedy?

To do that we need to make some changes to the embed code. I have done this for you.

Copy and paste the embed code below.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8v23Cg4EBw"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8v23Cg4EBw?autoplay=1><img src=https://img.youtube.com/vi/Y8v23Cg4EBw/hqdefault.jpg alt='Iceland HDR 4k Dolby Vision'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="Iceland HDR 4k Dolby Vision"
  loading="lazy"
></iframe>

To add it to your post you can do the same thing and use the “Custom HTML” block:

Then paste the contents of the iFrame into the box:

There are a few changes you now need to make.

The first is to replace the Y8v23Cg4EBw ID with the ID of the video that you want to show.

You will find the ID at the end of the Youtube URL.

For example, in this video https://www.youtube.com/watch?v=VQY8L5U89Mg the ID is the part after the v= so “VQY8L5U89Mg”.

You will also need to change the title of the movie. The title is in 2 places, the first is the alt text in the image and the second is the title attribute on the iFrame.

In our example the title is “Iceland HDR 4k Dolby Vision”. Find this text in both places and replace it with yours:

...
src=https://img.youtube.com/vi/Y8v23Cg4EBw/hqdefault.jpg alt='Iceland HDR 4k Dolby Vision'><span>▶</span></a>"
...
  title="Iceland HDR 4k Dolby Vision"
...

You can set the title to any text you like, it does not have to match what is on Youtube.

When you are ready, hit the “update” button so we can see the changes. It should look like this:

Now that we have faster code we can re-run the test on PageSpeed Insights:

The test is 87! This is faster than the test without the video. This can happen due to network issues but do not worry. The main thing to notice is that the page loads fast and now the video is not harming page speed.

Why is this faster?

We have used the magic of the iframe srcdoc attribute. This attribute will stop the video from appearing on page load (the reason the page slows down). Instead, it loads an image and when you click the image it will load the video. Making the page fast to load.

Most browsers support the srcdoc attribute except Internet Explorer. On this browser, the pages will still be slow as the video loads straight away. Luckily, there are now very few people using this browser and it is being phased out by Microsoft.

We have also made use of the new loading="lazy" attribute which Chrome, Edge and Opera supports. This will only load the iFrame when you scroll down the page. This again will increase the page speed.