Responsive YouTube oEmbeds in WordPress

oEmbeds are an extremely easy way to include video and other media from specific sites on your  WordPress powered site. You only have to paste in the url instead of copy and pasting a large code snippet into the WordPress content editor.

For example, before oEmbeds you would have to copy and paste something like this:

and now all you need is this:

oEmbeds sound perfect, right? Well, it’s almost perfect. WordPress automatically wraps that YouTube link in an iframe with a set width and height. Not a huge deal if you are using a fixed width site, but chances are your site is responsive.

Responsive sites do not get along with elements set with fixed widths and heights. The video embed will overflow the viewport and hang off into the margin. Users will be able to horizontally scroll on the mobile view of your site and that’s not an ideal experience.

However, there is a pretty quick fix for this problem. You only need to add a few lines of CSS and jQuery to your site to make sure that your YouTube oEmbeds will perfectly fit any screen resolution.

1. Set up the jQuery

Copy and paste the following code into a new .js file named ‘responsive-video.js’ inside your theme folder:

The next step is to include the javascript file you just created into the front facing part of your site. In your theme’s functions.php file include the following snippet:

Please note: If you are using a child theme, swap out get_template_directory_uri() with get_stylesheet_directory_uri().

 2. Add in the CSS

This CSS comes from the site Embed Responsively and it’s amazing! In your style.css file in the root folder of your theme, copy and paste the following snippet:

3. Boom Bam! All done!

Feel free to resize the screen and check out that responsive goodness in the example below:

You should be good to go! Please note that this can be done for other oEmbed services besides YouTube. For example, say you need responsive Vimeo video embeds, then modify your .js file to this:

The inspiration for this tutorial came from a mash up of these CSS Tricks and Embed Responsively articles.

10 thoughts on “Responsive YouTube oEmbeds in WordPress

  1. Hi! I’ve got this working, but I am looking for a way to add in YouTube embed customizations, such as “showinfo=0”, “rel=0”, “hd=1”, allowFullscreen, etc. I haven’t been able to find an answer; any suggestions?

  2. This can be easily done without jQuery on the server side. Just put this anywhere in your functions.php file:

    // responsive oEmbed videos
    add_filter( ’embed_oembed_html’, ‘custom_oembed_filter’, 10, 4 ) ;
    function custom_oembed_filter($html, $url, $attr, $post_ID) {
    $return = ”.$html.”;
    return $return;
    }

    And this css:

    .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin-bottom: 1em;
    width: 100%;
    }
    .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    It does exactly the same as the jQuery method mentioned here, but the html wrapper is already inserted by a wordpress hook on the oembed function, instead of doing it afterwards in the browser of the client. It’s a bit more ‘clean’.

    Cheers!

    1. Matiyin, not seeing how .video-container is being wrapped around the iframe on the oEmbed. Added your code to functions.php exactly and all it does is add “.” periods around the iframe. Any ideas? Would rather not use jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *