How to Make Embedded Videos Responsive In Your WordPress Theme
The embedded YouTube video in your blog post is not showing properly in the mobile or tablet devices? The issue is that the video you have embedded in your article is fixed width and your wordpress theme is not making the video responsive to fit it in smaller devices.
Your wordpress theme is not fully responsive until it adapts all the HTML elements with smaller devices. WordPress 4.4 has made the images responsive by default. Here is how to make embedded videos responsive in your wordpress theme.
Also read:
- Multi Device Website Mockup Generator – Create Website Mockup for Apple Devices
- How to Create PHP AJAX Contact Form with Google reCaptcha
- How to Embed Crelly Slider in your WordPress Template
Steps to Add Responsive Video Support to your WordPress Theme
It is highly recommended to backup the functions.php file before going through the following steps.
- Login to your WordPress backend
- Click on “Appearance >> Editor”
- Now click on “Theme Functions (functions.php)”
- Copy the following PHP code and paste in your theme’s functions.php
[php]
/*————————————————
* Responsive video embed
————————————————*/
add_filter(’embed_oembed_html’, ‘wrap_embed_with_div’, 10, 3);
function wrap_embed_with_div($html, $url, $attr) {
return "
<div class=\"responsive-container\">".$html."</div>";
}
[/php] - Now click on “Update file” button below
Note: You can also edit functions.php using your cPanel
Conclusion
You have just added the responsive video support for your wordpress theme using ‘embed_oembed_html’ wordpress filter. Now embedded YouTube videos becomes responsive in your wordpress theme.