CODEWITHSUNDEEP
htmlcss
Case
Case

Reputation: 281

Html5 video responsive section

I have a video that I have added to my main section of my site, the dimensions are 1920 x 1080, my problem is that the sides are not 100% width if I make the height 100vh.

if I make the height: 100% it goes past the vh of the browser and the responsiveness is to small.

the way they have this video here is what I am trying to accomplish

http://www.welcometofillory.com/

.container video {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
    }

<div class="container">
<video id="my-video" preload="auto" loop style="width: 1920px; height: 1080px;" width="100%" height="100%">
 <source src="landing-video.mp4" type="video/mp4"></source>
</video>
</div>

Upvotes: 0

Views: 101

Answers (1)

Jaypee
Jaypee

Reputation: 1280

What's happening to you is correct since the video will always be enlarged proportionally. If you add it to be 100vh (the entire browswer height) then the sides will go off the canvas as the relation is 16:9.

I recommend you to use bootstrap's responsive video: 

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

Or simply add a wrapper to it that doesn't allow the video to go beyond limits.

.container {
    width:100%;
    height: 100vh;
    overflow: hidden;
}
video{
   height: 100vh;
   width: auto;
}

Let me know if this helped you, otherwise please add more specifications to your question to understand it better.

Upvotes: 1

Related Questions