Video rescaling and cropping on lower res screens


#1

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


#2

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?


#3

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.


#4

Will that keep the aspect ratio of the video?


#5

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


#6

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.


#7

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.