2 Simple Ways to Insert Responsive iFrame to WordPress Post

As a WordPress site owner, you may get familiar with iframes which allow you to present content from another website right on your site. It’s like a window for users to open and see the content of other sources such as social posts or YouTube videos.

We’ve already covered some topics on how to create a frame to share content as well as ways to add an iframe widget in Elementor. To continue with the iframe series, today we’ll go over an important factor of the iframe, mobile responsive.

Let’s get started!

Why Making Your WordPress iFrame Responsive?

Inserting an iframe into the content is awesome. There will be no worry about copyright violations or heavy self-hosted files. However, making it responsive is not an easy task.

61% of the US website traffic came from mobile devices, according to a Google Analytics report while this number was down to 35.7% for desktops. These statistics have risen the vital role of responsive iframes.

As a matter of fact, iframes don’t always fit mobile and tablet screens, and YouTube videos in particular. Your embedded content can be cut off or become distorted. If you are surfing on a page and seeing a video like this, how would you feel? It’s definitely not comfortable.

A responsive iframe will bring a positive and mobile-friendly look to your content. This helps greatly improve the user experience and bring more traffic to your site.

How to Add a Responsive iFrame to WordPress Using a Plugin

You have various options of WordPress iframe plugins, from free to premium. Still, not all of them support responsive iframes. We recommend the EmbedPress plugin as an ideal solution.

Trusted by over 40 thousand users around the world, the plugin lets you embed any type of content to your WordPress page and post, including videos, images, posts, audio, maps, documents, and tons more.

Once inserting content into an iframe, the plugin will automatically make it fully responsive. Below is how you can install and start using the plugin.

Firstly, go to Plugins → Add New in your WordPress admin and type “embedpress” in the keyword box to search for the plugin.

 

Once the plugin appears, click on the Install and Activate button to have the plugin ready on your site.

 

The next step is to open the page or post you intend to add the responsive embed. In your page editor, click the plus (+) button and search for the “embedpress” block. In this example, we’re using the Elementor page builder.

 

The plugin now adds four different iframe options to your page builder. They include EmbedPress for videos, EmbedPress Document for DOC and PPT, EmbedPress PDF for PDF files, and EmbedPress Google Calendar for a calendar.

Since we’re going to display a YouTube video, we’ll pick the first one. In the Source Name, you need to choose the source of your video, such as YouTube, Vimeo, Dailymotion, and Wistia, etc.

 

After that, enter the URL of your video. There are other settings options to customize the video. You can let it start or end at a specific time. It’s available for you to have the video play automatically or enable the video annotations.

 

Preview the page to see how your video looks from the front end.

Edit Your Theme’s File to Insert a Responsive iFrame

If you prefer solving problems on your own rather than using plugins, this guide is for you. You need to add some code snippets to the CSS in your child theme.

The first step is wrapping your iframe code with a div tag:

<div class="iframe-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/TgKaCY5iS_s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Now, head to Appearance → Theme Editor in your WordPress admin dashboard. In the style.css file, enter the code below:

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

That’s it! Bear in mind that these changes should be made on your child theme, otherwise, they affect your entire site performance or even break the site down.

What’s Your Solution for WordPress Iframes?

You can easily insert an iframe into WordPress content. However, making it responsive to mobile and tablet devices is a different story. Most of the time, your embedded images or videos may get cut off or look strange.

We’ve shown you 2 methods to make them mobile-friendly manually and using a plugin. After adding a code snippet to your style.css file, you can wrap it with a div tag. The EmbedPress plugin will be a good try in case you want to look for a simple solution. Once embedding content, the plugin will make your iframe responsive automatically.

Are these 2 processes clear enough? Let us know your experience in the comment section below.