Hello
I tried the Video Responsive component, but doesn’t really work for me. There is a thread about it, but still this is quite mysterious.
I have a video and I would like to resize with media query .
<iframe allowfullscreen frameborder="0" src="https://player.vimeo.com/video/625586103?loop=1&portrait=0&title=0&byline=0" width="900" height="900"></iframe>
Is that possible or I need to do some JS ?
Thanks
What works for me :
Inside BODY create a CONTAINER.
Inside CONTAINER create a ROW.
Inside ROW create a COLUMN.
Inside COLUMN create a DIV with class video-container
Inside Div create a custom code
CSS video-container comes from the video-responsive component.
and Custom code is :
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://player.vimeo.com/video/625586103?h=b53f71bfdd" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
et voila
You shouldn’t have to use media queries for that at all if you use the Responsive Video component. What part is giving you issues? Drag it in and use the Options panel for settings. It is automatically responsive when you use that component.
You also need to add a class of “embed-responsive-item” to your iframe
You guys are trying to reinvent the wheel here lol. Seriously though, use the Responsive Embed component which is better than using an iframe and a whole lot simpler.
Drag the component into your project.
Go to the options panel in top right of BSS and add your URL
Choose your aspect ratio or leave it at default one
Turn on allow full screen if you want it and you’re done.
That’s it, this is so simple to use and definitely better than an iframe.
No Media Queries needed it’s all set to go, that’s why it’s called a “Responsive” Embed 
The responsive embed component is the same as what has been discussed, and still uses an iframe, yes a lot simpler to use.