Responsive web design is essential for delivering a positive, mobile-friendly User Experience (UX). Unfortunately, when you embed certain types of content on your WordPress site, particularly YouTube videos and iframes, they don’t always translate well.
Inline frames aren’t responsive by default. However, there are simple strategies you can use to make your embeds responsive in WordPress. Whether you’re a tech-savvy developer or a WordPress beginner, there is a quick and easy solution for you to use.
In this post, we’ll briefly discuss the importance of making your embeds responsive in WordPress, then walk you through the two different methods you can use to do so. Let’s get started!
The Importance of Responsive Embeds in WordPress
Responsive design is the foundation of a mobile-friendly website. Static elements and pages can present navigation issues, poor readability, and other inefficiencies that contribute to higher bounce rates.
A responsive website means delivering a positive UX for your visitors, regardless of the device they’re using to access your site. Unfortunately, while text and images are easily adaptable, other elements – particularly embedded content – are a bit more challenging to work with.
Adding videos and social media content in your WordPress pages can help make them more interesting, shareable, and engaging. However, embedded content is only helpful if it’s viewable.
When you embed videos, social media posts, and other types of content that aren’t responsive by default, it can break the mobile design of your site. Even if you’re using a responsive WordPress theme, portions of the embedded content may get cut off or distorted.
By making your embeds responsive, you minimize the amount of scrolling and zooming your users have to do in order to comfortably browse and consume your content on their smartphones and tablets. The result is a more aesthetically pleasing, user-friendly website.
How to Make Embeds Responsive in WordPress (2 Possible Methods)
If you want to make embeds responsive in WordPress, there are two main methods you can use: the plugin method and the manual method. Let’s take a look at both.
Method 1: Use a Plugin such as EmbedPress
If you’re not comfortable working with code or editing your theme’s files, you can use a plugin to make your embeds responsive in WordPress. While there are a handful of options, we recommend EmbedPress:
This freemium plugin is incredibly easy to use and provides a quick, simple way to embed various types of content, including YouTube videos, social media posts, and Google Docs. When you embed content via this plugin, it automatically makes it responsive.
To use it, first install and activate the plugin on your WordPress site. Then navigate to the page or post to which you want to add the responsive embed.
In the editor, click in the (+) icon, then search for the EmbedPress block. It will display a dropdown of supported applications and platforms you can embed content from:
Select the one you want to use (we’ll use YouTube as an example), paste the content URL in the link field, then click on the Embed button:
Note that once you have EmbedPress installed on your WordPress site, you can add other media such as Instagram posts simply by pasting the URL in your editor. After you paste the link, it will automatically convert it to responsive, embedded content.
Your video or other content will display within the block on the back end. To see how it looks on the front end of your site, click on the Preview button in the top right-hand corner of the editor. If you use your mouse to adjust the size of your browser window, you should notice that the video remains viewable and in frame even as the window shrinks.
Save and publish your changes. Then you can also view your site from a mobile device to confirm that your embed is now responsive.
Method 2: Manually Edit Your Theme’s Files
Another way to make an embed responsive in WordPress is by editing your theme’s CSS. Of course, this method is only recommended if you’re comfortable working with code and prefer not to install another plugin on your website.
However, before following this method, we suggest backing up your site. You might also consider creating a child theme so that your changes won’t be lost when you install updates.
Once you’re ready to get started, access your File Manager or File Transfer Protocol (FTP) client and open the style.css file of your current WordPress theme. Next, copy and paste the following code snippet into the file:
.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%;
}Now, any time you want to make an iframe embed responsive, you simply need to wrap it in a div tag with the iframe-container class. Let’s say you wanted to embed a YouTube video in a WordPress post.
The first step is to get the embed code from YouTube. Navigate to the YouTube video you want to embed, then click on the Share button. Choose the Embed option from the list:
It will open a panel that displays the iframe embed code. Copy it. Next, navigate to the WordPress post where you want to include the embedded content, and paste the embed code in a Custom HTML block:
The next step is to wrap the code in a div tag with the iframe-container class that we added to our theme’s style.css file. In our example, it would look like so:
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qnretr_0cRA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>You’ll then be able to preview the video within the editor:
Once you’re done, save your changes. That’s it!
Conclusion
YouTube videos and social media posts can help make your WordPress site more engaging. However, to ensure the content translates well across all screens and devices, it’s important to make sure the content you embed on your site is responsive.
In this post, we discussed two ways to make your embeds responsive in WordPress:
- Use a plugin such as EmbedPress to automatically make YouTube, Instagram, and Google embeds responsive.
- Manually edit your theme’s files and wrap your embed code in a div tag with the iframe-container class.
Do you have any questions about making embeds responsive in WordPress? Let us know in the comments section below!
1 Comment