Resize video embeds for mobile (responsive design)

When you embed videos from a video hosting site like Youtube, Vimeo, or Wistia, the embed codes have a defined height and width. This can cause your videos to appear too small on large monitors or too large on mobile devices.

While you could switch the width to "100%", the height will remain static so the dimensions of your video will skew depending on the size of your screen.

Here's a little hack you can add to your theme to take advantage of responsive embeds.

  1. Go to Settings > Style > Body HTML.
  2. Paste this code into the bottom of your Custom HTML:
    <script>
      $(function() {
        $('iframe').wrap("<div class='embed-responsive embed-responsive-16by9'/>").addClass('embed-responsive-item');
      });  
    </script>
  3. Paste this code into your Custom CSS:
    /* -- responsive embed styles -- */
    
    .embed-responsive {
      position: relative;
      display: block;
      height: 0;
      padding: 0;
      overflow: hidden;
    }
    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .embed-responsive.embed-responsive-16by9 {
      padding-bottom: 56.25%;
    }
    
  4. Save.
  5. Now your videos should resize beautifully on any device!