CODEWITHSUNDEEP
htmlcsshtml5-videocss-float
Emma Flood
Emma Flood

Reputation: 13

Video with "float: right" property will not play - obstructed by text

I wanted to wrap text around a video element, and I achieved this with float: right. However, even though the text is visually wrapping around the video in the way I want, the width of the first two paragraph elements are covering the video, therefore I can't press play and the video will not work at all.

.video {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    z-index: 5000;
    width: 50%;
    }

    .obstructing-video {
    width: 50%;
    margin-right: 0!important;
    padding-right: 0!important;
    }
<div>
 <video class="video">
 <source src="/videos/video.mp4" type="video/mp4">
 </video>
        
 <div>
 <p class="obstructing-video">text text text text text etc etc</p>   
 <p class="obstructing-video">text text text text text etc etc</p> 
 <p>text text text text text etc etc</p>   
 <p>text text text text text etc etc</p> 
 </div>
 </div>

As you can see I've tried declaring the width of the p elements that seem to be the problem but in web developer tools I can see that the margin is still covering the video. Therefore I set margin-right and padding-right to 0 but no luck. I also tried to adjust the z-index of the video but still not working.

What is the issue? Thanks

Upvotes: 1

Views: 55

Answers (2)

A Haworth
A Haworth

Reputation: 36512

It is a correct use of float, to get text to float around an image (or video in this case).

However, that doesn't seem to be related to your problem. Amongst other things you have moved the video out of the text's stacking context with a z-index. If you try the snippet, which is basically yours but with the p elements having a background color, you will see that they are not overlapping the video element, they are going underneath.

The video element has no controls attribute. If you put one in as in the snippet you will see that it is possible to start the video.

.video {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    z-index: 5000;
    width: 50%;
    }

    .obstructing-video {
    width: 50%;
    rmargin-right: 0!important;
    rpadding-right: 0!important;
    }
    p {
    background-color: pink;
    }
<div>
 <video class="video" controls>
 <source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
 </video>
        
 <div>
 <p class="obstructing-video">text text text text text etc etc</p>   
 <p class="obstructing-video">text text text text text etc etc</p> 
 <p>text text text text text etc etc</p>   
 <p>text text text text text etc etc</p> 
 </div>
 </div>

But what you really want is the float to act properly as a float, so that the text will wrap around if there is a lot of it. Here is the same snippet but with the z-index removed and a lot more text.

.video {
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 50%;
    }

    .obstructing-video {
    width: 50%;
    rmargin-right: 0!important;
    rpadding-right: 0!important;
    }
    p {
    background-color: pink;
    }
<div>
 <video class="video" controls>
 <source src="https://ahweb.org.uk/butterfly.mp4" type="video/mp4">
 </video>
        
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus euismod lectus non tincidunt. Donec augue sapien, scelerisque eget massa eu, placerat volutpat urna. Pellentesque libero tellus, ultrices et viverra at, varius vitae ex. Suspendisse nunc diam, placerat vel ex ac, tincidunt pretium urna. Phasellus eget egestas odio. Vestibulum nec congue elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer interdum in ipsum ut euismod. Vivamus eget eros ante. Vestibulum quis leo hendrerit, pretium massa et, condimentum elit. Nulla dolor mi, pharetra et ultrices id, mattis ac neque.

Nulla turpis odio, faucibus nec nisl a, laoreet hendrerit elit. Ut elementum dignissim turpis, vitae finibus diam semper sit amet. Phasellus maximus fermentum elit, nec consequat libero vulputate vel. Suspendisse euismod fermentum quam, nec semper risus fringilla ut. Vivamus vehicula metus eu orci facilisis, vel blandit justo suscipit. Quisque felis mi, hendrerit non viverra vitae, malesuada ac mauris. Phasellus tortor nisl, consequat et metus in, porta facilisis lorem. Nunc a finibus risus, non rutrum risus. In ipsum orci, luctus eget eros sed, congue viverra lacus. Nulla ut ante ipsum.

Quisque eu ligula at nisl sollicitudin cursus sit amet in eros. Nunc tincidunt purus augue, nec vestibulum urna condimentum nec. Integer faucibus felis dolor, at euismod risus imperdiet et. Donec tristique mauris neque, vel dapibus enim mattis at. Fusce id fermentum arcu. Fusce vestibulum convallis sodales. Morbi suscipit vestibulum nulla, ut fringilla mi elementum nec. Phasellus ac auctor tellus, vel venenatis felis. Aenean congue tellus urna, id sodales elit ultrices vitae. Nullam posuere magna ut nisi vulputate, vitae eleifend dui tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus sapien augue, ut placerat orci tempor sed. Cras pharetra libero nec lacinia sodales. Donec vel nisi ac purus dictum ornare. Phasellus varius odio a pellentesque porttitor.

Maecenas euismod nibh lectus, vitae dignissim dui ultrices eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pretium ut lorem sit amet posuere. Fusce bibendum felis diam, sit amet vestibulum eros maximus vitae. Nulla sagittis odio nec erat fringilla faucibus. Cras erat sem, accumsan at auctor et, convallis at nisi. Cras lectus mi, consequat a felis eu, faucibus ornare magna. Duis nunc sapien, facilisis porta erat at, elementum vehicula metus. Donec sed dui est. Donec eros nunc, faucibus sit amet malesuada vitae, efficitur sed ligula. Cras porta, nisl quis rhoncus vehicula, ipsum nibh rhoncus quam, in fringilla mi velit nec ipsum. Etiam mi ex, finibus et tellus at, scelerisque aliquet ex. Aliquam erat volutpat. Vestibulum ut mi non felis consequat convallis.

Duis tristique elit felis, ac posuere lacus tempus eget. Duis sit amet consequat eros. Vestibulum vitae magna ut orci faucibus iaculis. Integer mattis ligula ut finibus venenatis. Nam lacus turpis, vestibulum id tincidunt at, interdum ac nibh. In ac elit convallis augue gravida vehicula non in elit. Cras lectus velit, faucibus sit amet posuere sit amet, condimentum luctus justo. Donec mollis vestibulum velit, ut tincidunt dolor elementum et. Quisque id auctor neque, eu sagittis metus. Nullam porttitor fermentum tempor. Aliquam erat volutpat. Integer laoreet aliquet diam ut fringilla. Duis at orci ac libero elementum auctor. Cras eget placerat libero. Sed scelerisque vel lacus quis placerat. Nulla facilisis lobortis turpis in porta. 
 </div>
 </div>

Upvotes: 1

yannickvdthoren
yannickvdthoren

Reputation: 121

You should use flexbox instead of float. Here is the complete guide.

So in your case, your code would be

main{
  display: flex;
  flex-wrap: wrap 
// give the opportunity for the content to wrap on smaller screen
}
video{
  flex: 1 1 50%
// the video can grow and shrink and his basic width is 50%
}
main div{
  flex: 1 1 50%
}
<div class="main">
  <video></video>
  <div>
     <p></p>
     ...
     <p></p>
  </div>
 </div>

If you want to achieve a result where you have two lines of text on top of the video, you'll have to create a div separate for those line on top of the video ans set up a flex of 1 1 100%.

Upvotes: 0

Related Questions