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.
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.
How to Embed Youtube Videos on WordPress, Final Thoughts
We have looked at how to add videos to your WordPress blog. Although this is easier with blocks, the video does not look very good when added to the page.
We can improve the visual by using the Youtube embed code yet, this slows down the page.
In the test, there was an increase of 4 seconds on the page load speed with one video.
The solution to this problem is to use our custom embed code. This will embed the video into the page and keep the page fast.