Making Video Embeds Responsive

If you're embedding videos from YouTube or Vimeo, you might find that they don't occupy the full width of the article. Or that they're even wider, and cause the window to scroll. You can make these embeds fluid with a little custom JavaScript. 

The JavaScript

<script>
    $(function () {
        // Find all YouTube/Vimeo/Wistia videos
        var $allVideos = $("iframe[src*='//www.youtube.com'],iframe[src*='//player.vimeo.com'],iframe[src^='https://fast.wistia.net']"),
        
            // The element that is fluid width
            $fluidEl = $("#article .card-block"); // NOTE: this may differ on your template
        // Figure out and save aspect ratio for each video
        $allVideos.each(function() {
        
            $(this)
                .data('aspectRatio', (this.height / this.width) || 0.5625)
        
                // and remove the hard coded width/height
                .removeAttr('height')
                .removeAttr('width');
        
            });
        
            // When the window is resized
            $(window).resize(function() {
        
          var newWidth = $fluidEl.width();
        
          // Resize all videos according to their own aspect ratio
          $allVideos.each(function() {
        
            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));
        
            });
        
        // Kick off one resize to fix all videos on page load
        }).resize(); 
    });
</script>

Now your videos should all resize with the window, and default to a nice full-width version 📺