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:

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.

  1. Login to your WordPress backend
  2. Click on “Appearance >> Editor”
  3. Now click on “Theme Functions (functions.php)”
  4. 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]

  5. 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.



Article by Shrinivas Naik

Hi, This is Shrinivas I am a web developer and WordPress enthusiast. I am also a hobby blogger who loves to write about WordPress, web tools, blogging and technology.


Leave a Reply


This function has been disabled for TechSini