Divi does a cool thing with videos, making them fit into whatever element contains them.  This sometimes causes problems with overlapping, z-indexing, etc. And sometimes you just need to disable the responsive video.

Documentation on this is difficult to pin down but I finally found the solution and it is relatively simple. Basically Divi uses a js library called FitVids.js, this is the culprit. Luckily for us, the developers of FitVids.js did everybody a solid and made it super easy to escape when necessary. So thumbs up to Dave Rupert and his lackeys at Paravel.

SOLVED! How to disable responsive video in Divi

Method 1: Disable FitVids.js via CSS selector.


The developers of the plugin gave us a handy class we can add to any element. Each element in Divi has an “advanced” tab where you can give the element (section, text box, etc.) its own unique ID or class that can be targeted with the above line of jquery.

Disable responsive videos in Divi - fitvids.js fitvidsignoreAnything inside of that element will now ignore fitvids.js and instead use the width specified in the iframe (the youtube embed code).

If you need to apply a sweeping change to an entire post type or maybe the website in general, you can always hardcode the class into your theme:

<div class=”fitvidsignore”>

[website stuff]


Method 2: Disable Divi responsive video (FitVids.js) via jquery:

$(“#main-content”).fitVids({ ignore: ‘.YourClassName’});

This line of code above can be added to the code module or hardcoded into your theme. You can target the entire page or just a certain Divi element.  This is probably best used on certain post types when you need to hardcode a rule or during giant migrations where you get strange display issues.