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 youtube.com domain responsive by just using Bootstrap 4’s video responsive classes.
That’s easily achieved with 1 line of jquery:
What the script will do is: find all the iframes that point to youtube.com and wrap them in a <div> with bootstrap classes.
Additionally it will also assign to the iframe the required class to make it work.
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: