---
title: "Making Video Embeds Responsive"
description: "If you're embedding videos from Youtube or Vimeo, you might find that they don't occupy the full width of the article. You can make these embeds fluid with a little custom JavaScript."
url: "https://support.helpdocs.io/article/qy7FgsvaAn-making-video-embeds-fluid-width"
category: "Code Snippets"
updated_at: "2024-09-12T17:35:38Z"
---

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

If you make your video containers fluid, you'll no longer be able to modify the width on a per-video basis.

### The JavaScript

Paste this snippet into **Settings** > [**Code**](https://my.helpdocs.io/app/settings?tab=code) > **Javascript**

```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 📺