Embed a YouTube or Facebook Video as iFrame for Faster Page Load

Embedding a video on your site gives it extra visibility. But, it can also cause your page load time to slow down. Plus, it can look ugly and include suggestions to videos that are not yours, sending visitors off your site to your competitors.

In this tutorial, see how to combat all of these issues by selecting special embed options and using an iFrame, instead of the oEmbed code, for both YouTube and Facebook videos.

I’ll also show you neat tricks and tips for getting better SEO on your post, as well as more subscribers to YouTube and Facebook.

NOTE: If you use an ad network, check with them to see if you can use lazy load.

NOTE: Lazy load doesn’t play well with Google’s reCaptcha v2, which you may be using on your contact forms. (See this tutorial on how to add it to Contact Form 7.) On the paid version of WP Rocket, you can turn off lazy load on a per post/page basis. You can’t do that on the free, standalone LazyLoad plugin made by them.  Perhaps other lazy load plugins have that feature. Lazy load seems to work okay with Google’s reCaptcha v3, though.

---

Subscribe to BlogAid on YouTube and Facebook

---

NOTE: Here is the code I use to embed a YouTube video that cleans up the player and only shows my own videos as suggestions at the end.

Replace xxxxxxx with your video ID

Transcript

(Start time for transcript is about the 1:00 mark)

I’m using the TinyMCE Advanced Text Editor plugin to make several of these tricks work.

If you are not using that plugin to retain your paragraph and break tags, then you likely will not be able to embed iFrame code that will stick.

You can find a link for my tutorial on TinyMCE Advanced in the transcript or description of this video.

If you’re using Gutenberg, this may or may not work exactly the same. But this tutorial will still show you the basics. And I’ll have a new tutorial for how to do this in Gutenberg if it is different, so be sure to look for that in the description or transcript.

Next

Let’s talk about the huge benefit to using an iFrame instead of the oEmbed link.

A Lazy Load technique can have the same speed effect on iFrames for videos as it does for images. This can dramatically speed up your page load time, which is good for both visitors and SEO for Google.

I recommend using the Lazy Load feature that is built into the WP Rocket plugin, or getting the LazyLoad plugin from the WP Rocket developers, if you are using another local caching plugin like WP Fastest Cache.

Okay, let’s dive in to show you how this all works.

Next

I’ve started a post for embedding a video. It’s the standard format I use for this type of post.

As you can see, I have a brief summary above the video.

Then a CTA, or Call to Action sandwiched between two horizontal rule placeholders to invite visitors to subscribe to the BlogAid YouTube channel. Of course, if you are embedding a Facebook video, you would want to have a CTA for your Facebook business page.

Then there is a placeholder for the two video I’ll be showing you how to embed.

And a transcript of what was said in the video below that.

Let’s go ahead and format this properly, and then we’ll get our YouTube embed code. Afterward I’ll show you how to get your Facebook embed code.

Next

The Summary area is fine as it is. Just paste your excerpt there. This is especially important for SEO, and for sharing this post on social media.

Next

I want my CTA and the video itself to be center aligned.

So I’ll highlight them and do that.

Next

To format the horizontal rules, simply highlight, and click the horizontal line tool.

Next

And, I’ll click my cursor in the text for Transcript.

And then make it a Heading 2.

Below that is where I would paste the transcript, or written text, for what was said in the video.

This is crazy important for SEO, as Google has no way to know what was said in the video.

Plus, some folks just prefer to read a tutorial rather than watch a video, or scan the text to quickly remind them of an instruction or other specific info that is buried somewhere in the middle of the video.

You can also include screenshots throughout the transcript, which makes it, and your SEO, even richer.

Next

Okay, let’s get our YouTube embed code.

Log into your YouTube account and go to your Creator Studio.

Click on the video you want to embed.

Next

Just below the video is a Share button, click that.

This will give you the oEmbed code to copy, which you could use, but it doesn’t have all the extra features we need.

But, you want to click the Embed link to get to the iFrame code.

Next

On the right you’ll see the iFrame code.

But, let’s first scroll down a bit and set our embed options.

Next

Uncheck the box for showing suggested videos at the end. This will ensure visitors don’t see related videos from your competition.

Then uncheck the box for showing the video title and player actions.

This will make the first frame appear cleaner on your site and less YouTube-y.

Next

Scroll back up and check your simplified iFrame code.

Click the Copy link in the lower right.

Next

Return to your post.

And go to the Text View Mode

Next

Look for the word video you used as a placeholder.

And note that it is inside a centered paragraph tag. This is the trick that using the TinyMCE Advanced plugin brings you. You will not have proper paragraph tags without it.

So, if you’re not using that plugin, you can still try to place your iFrame code, but you will lose it the moment you jump back to the Visual view mode.

The trick then is to complete your post, and all formatting in the visual view mode, then paste your iFrame in the Text View mode and publish the post. Never leave the Text View Mode while editing this post.

Next

You can set another size for your video now if you like too.

I find that 640×360 presents well in my blog posts.

Next

Okay, let’s preview this post.

Here’s our summary, followed by our CTA, then the video, and the transcript.

If your horizontal lines don’t look good, you could style those in your theme, as I have done, to be less than full width, center aligned, and red.

Or, you could just center align your CTA text and it will stand out nicely. Or use a blockquote, or other method to draw attention.

Next

Now let’s see how to get the iFrame embed code for a Facebook video.

There are two ways to get the code, either from your video page, or from the post with the livestream.

Let’s do it from the video page, as that is always the easiest to find.

Next

From your video list, click the video you want to embed.

On the left, click the More dots.

Then click Embed.

Next

At the top you’ll see a checkbox to include the full post.

This will include all of the comments left on the post too. So, if you just want the video, leave that unchecked.

There is also and Advanced Settings link that will pop you over to a Facebook Developer’s page and give you access to all of the underlying code. You can have a look if you want, but we’re going to stick with the simple way of doing things in this tutorial.

Next

Click once on the iframe code to highlight it.

And then use Cntrl+C or Cmd+C to copy it.

Next

Then return to your blog post and in the Text View Mode, paste it where you have your video placeholder, just as you did for the YouTube video.

You can also change the size of it now, but be careful to change both places the width is called out.

Next

Let’s preview this and see how both of them look.

As you can see, the YouTube video is nice and clean.

The Facebook video brings in a lot more info that you can’t remove. But that may also help you get more subscribers on Facebook, as most folks will assume this is an embedded YouTube video.

And if you selected to embed the whole Facebook post, the comments would display here too.

Next

This is why using the Lazy Load feature is so vitally important. All of this video info is coming from the outside world, meaning that you can’t cache it. And it can really slow down your page load time.

By having text above your video in your post, the video itself is lower on the page.

You want to get your video below the “fold” point so lazy load will have an opportunity to work on it.

The fold is the bottom of the page you can see displayed before scrolling.

On mobile, that’s going to be super short.

So, you’ll want to check your analytics and see how most folks are viewing your posts to determine where the fold point is for them. If that’s on desktop, you’ll need a lot more text above the video.

Things like your CTA take up a lot of that room too.

So, that’s a nice way to get more subscribers, and push the video down the page without bulking the page up with a lot of text above the fold.

Next

I hope you’ve enjoyed this quick tutorial on how to embed a video using an iFrame.

Subscribe to the BlogAid YouTube channel to get instant notification when new video tutorials go live.

And, subscribe to BlogAid on Facebook to get up to the minute news and site success tips.