Issue with Embedded Video Responsivnes

I am working on my Landing Page challenge and have run into some issues with making my video responsive.
The solution online that keeps coming up is using aspect ratio (52%) and using positioning of absolute and relative.
For now I have left this in the markup in html rather than CSS so its easier to see. The Issue is, when scrolling up the video, and the elements below the video scroll up and over my header, which is set to sticky, so in fact I end up with a reverse sticky which is not a solution for me.

The only other way I can make the video responsive is just adding a width of 100% or max-width 100% however this does not take advantage of the full width of a mobile device (adds margins, centers) and looks too small. IT also adds a large amount of space above and below the video if I try and make it responsive this way.

I think you are on the right track setting the height and width of the iframe to 100%, so do that again. This means that the iframe will take up 100% of the available space of its parent, which is a div in this case. So if the video is too small then that’s because the parent div is too small, so that’s where I would concentrate on fixing the problem.

The div naturally stretches all the way across the page, so it’s not the width that is limiting the size of the iframe. So I think I’ve given you a big enough hint on what you need to fiddle with to make the video bigger.


Thanks that helped and I managed to figured it out.
While looking I also noticed that I had only put one attribute on my margin for the hero div which likely was not helping either.
Videos are a little bit different than images on mobile!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.