Video floated left of another div not working

it expands to full width of page overlaping other div

[Lorel]

I'm trying to set up a responsive video with a div floated to the right containing text (two boxes of equal size, each about 450px wide, which span the width of the page which is 1024 in width). I searched multiple pages on the net in the last few days trying one code set up and another, but I can't get it to work.

I'm using the usual responsive video coding, and taking out width and height in the iframe, except I added a border so I can see what is happening, as follows:

.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
border:1px solid #000; }

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

However when I do that the video goes full width of the page (1024px) even if I leave the original width and height in the iframe ( 560x315). This happens even if I set up a separate div to try and control the width of the video (it's not included below because I'm not currently using it).

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/videoname" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

I have managed to get it to reduce to the right size (about 1/2 the width of the page) by changing "width and height" under video-wrapper iframe to 50% as follows:

.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
border:1px solid #000; }

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%; }

Here is the code for the other div:

.divwithtext {float:right; width:50%}

However when I do this there is a large blank white space below the video double the height of the video which is evidenced by the border I included. And the border I added to video-wrapper also encases the other div with text in it, which is strange as the other div is not inside the video-wrapper.

Also this video is no longer responsive -- the other div with text appears above the video like it should (float:none; width:100%), however the video is now contained in a box 2x width and height of the video with video in top left corner.

Can someone see my error?

[edited by: not2easy at 8:04 pm (utc) on Dec 20, 2017]
[edit reason] OP requested [/edit]

[not2easy]

I've edited your post to make the change you mentioned. I hope that is correct as shown now.

Youtube makes various sizes available, maybe a smaller size would serve your needs better. There are a few things in the layout you describe that do not always perform as it seems they should. The video iframe wrapper is set to 50% width and the floating text is also 50% but there may be other elements not taken into consideration. There may be margins, there is at least one border which only adds two pixels (right and left) to the width, but the total even without margins is more than 100%. Floats don't always use percent widths the way non-floated elements do. They just take what's theirs even if it means a new line/row.

To keep the video iframe at a fixed width expressed as a percentage of the total page width, it is better to contain the text beside it to a non floating element. Be sure to add in the widths of padding and margins when setting width.

There may be other issues related to the iframe use, I'll check my notes on that but I do recall several issues discussed here regarding iframes.

[NickMNS]

I'm not 100% clear on what you want to achieve but try this:

/*CSS*/
.video-wrapper { 
 display: -webkit-flex;
 display: flex; 
 flex-flow: row wrap; 
 border:1px solid #000;
 justify-content: space-between;
} 
.video-wrapper iframe { 
 max-width:450px;
 margin:10px;
}

<!--HTML-->
<div class="video-wrapper"> 
 <iframe src="https://www.youtube.com/embed/videoname" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> 
 <iframe src="https://www.youtube.com/embed/videoname" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> 
</div> 

See it here: [jsfiddle.net...]

This uses flexbox to achieve the desired effect.
For more info on flexbox:
[w3schools.com...]

Note: for future posts, please use the code tags it makes the code much easier to read and understand.

[Lorel]

@ not2easy

>I've edited your post to make the change you mentioned. I hope that is correct as shown now.

I couldn't find the edit button earlier so thanks for changing it.

>Youtube makes various sizes available, maybe a smaller size would serve your needs better.

I checked the YT site twice looking for an option to change the size and couldn't find it.

>There are a few things in the layout you describe that do not always perform as it seems they should. The video iframe wrapper is set to 50% width and the floating text is also 50% but there may be other elements not taken into consideration. There may be margins, there is at least one border which only adds two pixels (right and left) to the width, but the total even without margins is more than 100%. Floats don't always use percent widths the way non-floated elements do. They just take what's theirs even if it means a new line/row.

Ok, I'll check that out, however I have box-sizing:border-box set up (supposed to put padding borders inside a box). Maybe it doesn't work on videos.

>To keep the video iframe at a fixed width expressed as a percentage of the total page width, it is better to contain the text beside it to a non floating element. Be sure to add in the widths of padding and margins when setting width.

I have to float one or the other. I'll try floating the video instead. When the page reduces in size both boxes are centered one above the other.

Thanks for helping. I'll post again once I do some testing.

[Lorel]

@ NickMNS

Thanks for the new method for coding videos. I didn't see that example online when I was researching this. I'll check it out.

[Lorel]

@ NickMNS

The sample you provided was for two videos side-by-side. I have a video on one side and a box with text on the other side.

I read up on Flexbox and applied what you provided plus what else I think I needed. Everything looks ok except they are not side by side. Can you see what I might have left out? (i changed the name to flex-container)

.flex-container { 
display: -webkit-flex;
display: flex; 
 flex-flow: row wrap;
 justify-content: space-between;
 border:1px solid #000; } 
.flex-container iframe { 
max-width:430px; 
margin:10px; }
.flex-container, .reviews {color:#0168B3;
 padding:12px;
 max-width:430px;
font: italic 95% Cambria Georgia serif; }

HTML:

<div class="flex-container">
<iframe src="https://www.youtube.com/embed/videoname" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

<div class="reviews">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, </p>
</div>
</div><!-- end flex-container --> 

[not2easy]

The default for flex-flow is nowrap, you are telling it to wrap so it is wrapping. It looks like that line could be eliminated except in @media widths where it should wrap. When I try it with that line:

flex-flow: row wrap;

removed, they are side by side though not equal in width.

[Lorel]

@not2easy

Thanks that worked.