Responsive video holder

Hi,

Fairly new to Webflow so please forgive me if this is an easy fix.

I have placed 2 youtube videos each inside the Webflow video widget, side by side inside a div.

When scaling down screen sizes they don’t scale down.

Are they responsive by default? Can it be done?

Do they need to be set to flex?

TIA

Preview: https://preview.webflow.com/preview/which-way-westerham-2?preview=32a8aafcecdb71b132cd672b68d781bf


Here is my site Read-Only: https://preview.webflow.com/preview/which-way-westerham-2?preview=32a8aafcecdb71b132cd672b68d781bf
(how to share your site Read-Only link)

  1. If you use the Background Video component, it won’t be responsive, you’ll have resize it manually for each device view.

  2. The regular video component needs Youtube or Vimeo, which has styles that should be set on those platforms anyway - WF just give a good wrapper with no conflicts.

  3. Embed component is probably the best bet, if you’re on a hosting plan. That can be styled with flexiblity as a regular div. I’d use that component.

In which page you put those two videos?

General: This is not flex issue. The video not responsive by default + Youtube do not have a built-in option for this.

By embed HTML

Video component

Try option 3 above (EMBED) - its more easy to style the wrapper div of the video like this (100% width, 100% height)

Thanks Gary. Appreciate the help.

No problem Daniel. And yes I agree with Sitcon. Embed is much easier to deal with in the long run. Have Fun!

@Siton_Systems and when embedding is not an option because the video is part of a collection? Is there any other solution if I need a responsive video since it is not possible to embed HTML with the collection?
Thx in advance