Streaming live at 10am (PST)

Div with youtube-video height '100%' not correct

problem with a div, where a youtube video should be into

Look to the problem: children/people need to know perfectly the div-size of a youtube video before input:

iframe-fluid is to difficult for children

Thanks to help us to make webflow correct
Karel

I try to make a redesign the same as www.cinema4you.Be but for www.studiorubens.be
https://preview.webflow.com/preview/karelrosseel-studiorubens?utm_source=karelrosseel-studiorubens&preview=dc5c2631a1e7a7cc0063dce6dbb4ff8f

This is not a bug. The left text col set to inline-block - this is very very veryyyyyyyyyyyyyyyyyyyyy old layout technique. The height of two inline-block elements next to each other not auto match.

auto The browser calculates the height. This is default

height: auto - not related to match height of two elements.

https://www.w3schools.com/CSSref/playit.asp?filename=playcss_height

options;

columns

For such simple layout (Text col and video col) - use:

Flexbox

Flexbox (more advance + more control + cols match height)

Grid

Or grid (In my opinion for such simple layout - no need for GRID - but this is also an option).

yes I know, but I am teacher to children 17 years old, and they only get flexbox as they are 18 years old.
I will teach them afterwards yes I know.

But why is also the iframe not the full div width?



if I change the width and height to 100% there something wrong in webflow!

Thanks
Karel

You use fixed sizes (560 width X 315 height) - (So the youtube video go out of the screen). Your video not responsive. Use webflow youtube widget -or- google it (By iframe its little tricky).

<iframe width="560" height="315" src="https://www.youtube.com/embed/bQQxQTxCItU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

One example:
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

For me - i never find real good/simple solution so i use this Javascript (“works like magic”):

http://fitvidsjs.com/

About height and so on - every issue you find with youtube iframe - related to youtbue (Not to Webflow).

what is wrong with 100% width and height for the iframe?
image

Again no meaning for height 100% in this case - youtube widget wont stretch the video to “100%” of is original 100% video size. No solution her (This is how this widget works). When you set the video to 100% you get some “collapse” effect (Again not related to webflow).

ok strange… that webflow has no solution for this…
how to implement this into webflow
image
Do you have an example or can you make a loom-video for me
because children should need to know how to implemt iframe video’s correct …


because I do not know how to implement into webflow…
try it with my project online please…
thanks Karel

Webflow has solution for that. Use the video widget:

yes this is better… so there is a bug for youtube video: the aspect of the height is not correctly.

Children use normally ‘iframe’ so they need to put always the same div-size as the iframe so they can have no problem.

=> But the bug in Webflow is that an Iframe 100% height does not converts correctly!
=> this is my sollution for the moment: so NOT use youtube video

Thanks to help me
Karel

Please follow this tuturial (I made this now for this Q)

And again for me youtube and video works fine (Start from zero you use a lot of extra classes).

do not add any extra styles for the video widget himself

If you want to set width for the video - set width for the parent of the video

image

Summary: Works fine for me. Do not change the core styles and it will work fine (Responsive/Fast & Easy to set + some youtube options).

Watch video

2 Likes

@KarelRosseel82 - Mod Edit: Not a bug. Changed topic to design help -> layout.

ok thanks a lot… so never set a height for a youtube div… the height on ‘auto’.

but why do you name the div 56… not nessery because 56% is not used…

Question: and what about embed iframe… do you ever use it for youtube video?

Thanks

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