Hi,
I have a Youtube component inside a div with 500 px height, but the Youtube component is overflowing. Why is that? How can I fix it?
I tried giving the Youtube component same/shorter height than the parent div, but its still not becoming smaller.
Here is my site Read-Only: https://preview.webflow.com/preview/online-lubricants?utm_source=online-lubricants&preview=3204487ac0a88f2e02f151266102ffee&mode=preview
(how to share your site Read-Only link)
If you are trying to crop the video to the height, set the parent to overflow:hidden, if you want the the video ratio maintained and to be full ratio, get rid of the parent height (500px). Video height is normally controlled by the width.
@webdev If I move the video into the grid, it respects the height and width constraints.
But it’s not working for the div, I don’t know why. I don’t want to crop the video, I just want the video element to be as big as the div its placed in.
If you want to set a custom width and height to your video, you can create a custom Div block. To do that, drag in a Div Block from the Elements Panel. Give it a value for width, and another value for height. Now if you drag your video into this custom Div block, it will conform to that size.
The best for you is to find a way to control the size of the video using only width:100%, i.e. the width of its parent, not its height.
The reason is there’s CSS parameters baked into what composes the video player. For instance, here, you’re fighting with the height of the video player, when what really defines its height isn’t CSS height but the value in % set to the padding-top of the .w-embed-youtubevideo element. Using % unit in padding top and bottom has a strange effect, the value is then calculated depending on the width of the element, not its height. The value used here is 56.1702%, which is used to maintain a 16/9th ratio.
So those rules are there to prevent a video player to get a different ratio than the video inside has. There should be a way to find in your design to have the video behave like you want by just controlling their width.
There’s multiple ways to ovverride and redefine default properties of Webflow elements, but in the case of the video player, it’s a bit messy: you can try this code in a custom code component placed inside of the page if you want to see what it does when you override the padding rule:
<style>
.w-embed-youtubevideo {padding-top: 0!important;}
</style>
A video is 16/9th so if you know the height of the div where inside of which it should be placed, divide it by 9, multiply it by 16, and you get the value to use as a max-width on your video element.