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.

Embedding a video in your post could increase your leads by 66% a year.Click To Tweet

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.

As a Wix website owner, sometimes I feel left out on all conversations like this one. I can say that I understand the idea of embedding videos and photos within a post, but to truly how to do it without a wizard to guide me is beyond my pay grade, I am afraid. In fact, it is operations like this that I was hoping to avoid understanding which is why we chose Wix in the first place. However, after 2 1/2 years of blogging, I am finally learning some limitations that I know a WordPress site would not have. Thanks for sharing valuable info.

How to Embed Responsive Iframe in WordPress 1
Vox
From the comments

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

Instagram

 

View this post on Instagram

 

A post shared by Cool Universe (@cool_universe) on

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):

YouTube iFrame Code

Twitter:

Twitter iFrame Code

Instagram:

Instagram iFrame Code

Github Gist:

Github Gist iFrame

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:

Non responsive YouTube iframe

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.

How often do you embed iframe in your post? Embedding content from other websites makes a good addition to your content strategy - making your content more relevant and sharable. Find out how to embed a responsive iframe in WordPress!

Yuyu

I am a front-end developer and I teaches entrepreneurs who want to grow their audience, start an online business, and pursue their dream life. When I spend time away from the computer, I enjoy reading books and having a cup of green tea.

All author posts
Related Posts
Why You Should Embed Video in WordPress 2

Why You Should Embed Video in WordPress

Embedding video in your post is a great technique to increase user…

How to Add Content Box in Wordpress to Drive Conversion? 3

How to Add Content Box in WordPress to Drive Conversion?

Do you want to add a content box to your blog post to boost your…

How to Install a WordPress Theme 4

How to Install a WordPress Theme

Now that your WordPress site is up and running, you’re probably can’t…

Share
Tweet
Pin
Buffer