Video Size Dont Fit Responsive

Bootstrap Studio Help
1

Hi,

how to fit the video height in smaller views in the option toolbar?

If I set the height to auto, like in normal css code, the video is very small in height on desktp view.

I used width: 100%, height auto. It dont works.

2

You can add a media query that controls the height on xs break points through the css panel

To do that, simply click the mobile icon in the editor to trigger smallest preview window.

Then click the block/column that has you video in it and look at css editor, if you see a class name relating to the video then simply right click the 3 dots and select duplicate and the copied css class should appewr at bottom.

Then on the duplicate class right click again and select 'add query' and it will add a media query that will apply to xs small screens. Then just add your height attribute and it will only work on that screen size.

3

Thanks Chris, its a good solution, but the native proportions are gone. So its not that perfect.

4

Got it, made a new style with:

.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.video-container { position:relative; padding-bottom:56%; padding-top:30px; height:0; overflow:hidden; }

5

Glad you sorted it