How to make Youtube videos responsive automatically.

Making embedded YouTube videos responsive is a chore. Period. 
Below is the best scenario you can get if your video doesn’t get cropped out of its container.

There’re a couple of ways to fix it: writing some custom code, installing a plugin if you’re using a CMS.

My approach (actually not even mine, the main idea is from my colleague’s Tim which I amended) is to automatically make all the iframes embedded in your site which link to the domain responsive by just using Bootstrap 4’s video responsive classes.

That’s easily achieved with 1 line of jquery:

(Anywhere in your JS files will do, or just wrap it in a <script> tag anywhere you need it, needless to say it requires jquery on your site)

What the script will do is: find all the iframes that point to and wrap them in a <div> with bootstrap classes. 
Additionally it will also assign to the iframe the required class to make it work.

Practical example:

Your client/you/your grandma pastes youtube’s automatic embed iframe code:

The script will find it and automatically “convert it” to:

For the super lazy ones (probably whoever is reading this 😂), here’s bootstrap 4’s video responsive classes if you are not using the framework:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.