How to Embed Responsive Iframe in WordPress

How often do you embed iframe in your post? Shareable and fun content makes a good addition to any content strategy.

According to video marketing statistic by OptinMonster, video is the most popular content format for mobile device users. Aberdeen Group shows that marketers who use video get 66% more leads a year.

Not only that, do you know that poll is great at driving more engagement? Brands and businesses have been leveraging Twitter polls to conduct product research.

In this post, you’ll learn how to embed iframe in WordPress — responsive iframe.

[click_to_tweet tweet=”Embedding a video in your post could increase your leads by 66% a year.” quote=”Embedding a video in your post could increase your leads by 66% a year.”]

What’s an iframe?

An iframe or inline frame is an HTML page embedded inside another HTML page. With an iframe, you could embed content from other websites.

It’s a technique commonly used to insert a YouTube video. Not only that, but you could also insert Instagram post and Twitter tweets or poll to your page. Or even code snippet from Github.

Embedding other content onto your post makes your post more shareable, more credible, and less boring.

Let’s look at a few examples below:

Twitter

Would you rather always be 20 minutes late, or always be 20 minute early?

— polls (@polls) August 7, 2018

Instagram

 

View this post on Instagram

 

A post shared by Cool Universe (@cool_universe) on Mar 24, 2019 at 11:22pm PDT

YouTube

I particularly like embedding code using Github gist. Whenever I want to update the code, I could simply do it over at Github and the updated code would be reflected on my site. You’ll see an example below.

How to Embed iFrame in WordPress?

To embed an iframe you need to copy the iframe code into your text editor. You don’t have to install a plugin for that. But if you live and breathe plugin, I’ll share some of the best WordPress plugins for embedding iframe below. For now, let’s look at the code.

Most content providers will provide you with the embed code that you could customize and copy to your site.

YouTube (for more info on embedding YouTube video, check out this detailed guide):

Twitter:

Instagram:

Github Gist:

One thing you’ll notice as you start embedding an iframe on your post is the size of the iframe is fixed. While it might work for a Twitter tweet, poll or an Instagram post, it doesn’t look great for video.

So how do you make YouTube embed responsive? Or Vimeo embed responsive?

How to Make iFrame Responsive in WordPress?

When embedding YouTube video, you’ll notice that it’s not responsive. With most WordPress themes now being responsive, embedding a YouTube video might break your site design on mobile.

You might see something like this:

As you can see, the video iframe is cut-off on mobile. Iframe is not responsive to begin with.

We’ll use CSS to make iframe responsive. First, wrap your iframe code in a div like this with class “iframe-container”:

Next, add this CSS code to your child theme’s style.css.

If you’re not using a child theme yet, you need to read this guide on why you need to create a child theme. You might lose this code changes if you add it to your theme directly.

And, you’re done. Now your video should be responsive.

Final Thoughts

Content is king. While you always have to strive to write great original content, embedding other content into your site can boost readability and credibility.

Leverage on YouTube videos to bring life to your post. You could reduce bounce rate, increase dwell time and boost your SEO simply by embedding a video on your post.

If you want to know more about readability, you might find this post useful.