How to Embed a Responsive YouTube Video in WordPress

Unfortunately when embedding YouTube videos into your website they don’t scale down gracefully depending on the width of the device, but there is a small workaround using a bit of CSS that will fix this.

The Markup

To make your embedded YouTube video responsive you will need to wrap the iframe in a containing element to target in CSS.

HTML

<div class="video-wrapper">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/video_slug" frameborder="0" allowfullscreen></iframe>
</div>

CSS

To make the container div element maintain the same aspect ratio at all device widths we will need to give it a bottom padding as a percentage. As YouTube videos are 16:9 as standard we will simply divide 9 by 16 and multiply it by 100 to give us a percentage of 56.25.

This should make all YouTube videos responsive and playback without black bars at the top, bottom or both sides of the video.

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

SCSS

If you are using Sass in your project you can simply calculate the aspect ratio of the div by using simple divide and multiply operators. You could even create this as a mixin and reuse the code for other types of embeds.

.video-wrapper {
  position: relative;
  padding-bottom: 9 / 16 * 100%;
  height: 0;
  margin: 0;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

Adding to WordPress

Since the above solution requires adding extra markup around the embedded iframe, it would be a laborious task to create containing elements around every video that you embed, and also some authors may not be up to speed with writing HTML.

Don’t worry though, there’s a simple, scalable solution that can be used to embed YouTube videos directly into the WordPress content editor.

Shortcode

Using a shortcode is the best method for embedding a YouTube video in WordPress since it requires less code than copying and pasting an iframe.

If you are unfamiliar with creating shortcodes in WordPress you may find this a little alien at first, but once I explain what we’re doing you should be able to get this working in your own website.

We will need to register the shortcode in our functions.php file using the code below, you may want to consider setting up a child theme if you aren’t already using one. You could also creating a new file such as shortcodes.php so it doesn’t bloat your functions.php.

function youtube( $atts ) {

  extract( shortcode_atts(
  array(
  'slug' => '',
  ), $atts )
  );

return '<div class="video-wrapper">' . '<iframe width="750" height="422" src="https://www.youtube.com/embed/' . $slug . '?rel=0&amp;color=red&amp;vq=hd1080&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>' . '</div>';
}
add_shortcode( 'youtube', 'youtube' );

Basically what this code is doing is setting up a shortcode named “youtube” with an attribute named “slug” which you can input so it displays the correct video. You may also notice that I have added some parameters after the iframe URL, these are optional.

Now once we save the functions.php file and come into the WordPress dashboard everything should be ready to go!

To add the shortcode in the WordPress content editor you will simply need to paste the following code wrapping it in square brackets youtube slug="dQw4w9WgXcQ"

All done! When you publish your post you should see the following video that spans the full-width of the parent container maintaining it’s aspect ratio.