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
In cases, you want to use youtube as embed HTML iframe (Instead of webflow video widget ).
Less than 1 min.
1/2. Pre Steps
1.1. Youtube side
Get the embed code
[image]
[image]
[image]
Copy (ctr + C)
1.2.Webflow side
Paste (ctr + V)
[image]
[image]
2/2. How to Tutorial:
2.1
Create class for the embed HTML
A. Set position to relative
B. Set padding-top to 56.25% (Why 56.25%? Read her about aspect ratio (by w3schools))
C. Set height to 0
[image]
2.2
Add custom class (.iframe-fluid in…
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:
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).
https://stackoverflow.com/questions/35019924/make-youtube-video-full-width-and-fixed-height
what is wrong with 100% width and height for the iframe?
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
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)
In cases, you want to use youtube as embed HTML iframe (Instead of webflow video widget ).
Less than 1 min.
1/2. Pre Steps
1.1. Youtube side
Get the embed code
[image]
[image]
[image]
Copy (ctr + C)
1.2.Webflow side
Paste (ctr + V)
[image]
[image]
2/2. How to Tutorial:
2.1
Create class for the embed HTML
A. Set position to relative
B. Set padding-top to 56.25% (Why 56.25%? Read her about aspect ratio (by w3schools))
C. Set height to 0
[image]
2.2
Add custom class (.iframe-fluid in…
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
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
webdev
(Jeff Selser)
March 28, 2019, 7:19pm
11
@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
system
(system)
Closed
May 29, 2019, 4:35am
13
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.