Video rescaling and cropping on lower res screens

Hi there. Some students have complained that when they access the embedded videos in the course using a smaller window or low res screen the videos crop rather than scaling down. Is there any way I can prevent this happening? My P2PU course is The Biz Playbook .
Thanks

Hey @Matt_Hawkins. I suspect that happens because youtube normally includes the size for a video when embedding:

<iframe height="480" src="//www.youtube.com/embed/tgh3qOFmGvo?rel=0" width="853"></iframe>

Notice height="480" and width="853". This always causes some pain when embedding :frowning:

@Erika can we fix this in CSS so that the video fills the width when the size is left out?

Hey guys,

this can be fixed with changing the width="853" setting with width="100%". In this way video will always be 100% width of its parent container.

Will that keep the aspect ratio of the video?

yes it does. The aspect ratio is something that is always taken care of by youtube.

Can you maybe have a look here: https://p2pu.org/en/courses/1/blend-with-me/. The video goes full with, but the height doesn’t scale with the width :frowning:

I remember having to put video in a wrapper div and add CSS with a fixed aspect for my personal blog.

No, height has to be defined. And also set with the number and not in percent.

If you put it in a div wrapper, then you can set the height of iframe to 100%, but the div has to have the height set in px.

Usually setting the height of the video is not a huge problem anyway.