CODEWITHSUNDEEP
htmlvideo
FranticJ3
FranticJ3

Reputation: 107

HTML5 video fit the user's screen 100%

I'm trying to make a video element full-width and "fullscreen" and responsive at the same time.

Basically, I don't want to use the fullscreen api, I just want the video to fit on the user's screen no matter what size screen they visit the site in. I have made a video full-width, the only issue is that the height is a bit too big.

Here's the rather simple code:

<video id="bgvid" width="100%" height="" autoplay loop poster="">
            <source src="video.webm" type="video/webm" />
            <source src="video.mp4" type="video/mp4" />
</video>

Like I said this is causing it to go full width but larger than the whole screen due to the height.

Upvotes: 1

Views: 1624

Answers (3)

fudgey
fudgey

Reputation: 1

You can always set it so that the user can select the video size themselves. Like this

<div style="text-align:center"> 
<button onclick="makeBig()">640px - Normal</button>
<button onclick="makeNormal()">420px - Small</button>
<button onclick="makeSmall()">320px - Smaller</button>
<br> 
<video id="video1" width="100%" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function makeBig() { 
myVideo.width = 640; 
} 

function makeSmall() { 
myVideo.width = 320; 
} 

function makeNormal() { 
myVideo.width = 420; 
} 
</script>

Upvotes: 0

ahmad rabbani
ahmad rabbani

Reputation: 319

I will suggest you to control this using javascript. You can get height and width with following code

width = $( window ).width();
height = $( window ).height();    
document.getElementById('widthID').innerHTML=width; 
document.getElementById('heightID').innerHTML=height;

You can use above code in your application

Upvotes: 1

tor
tor

Reputation: 191

Dosn't this work?:

<video id="bgvid" width="100%" height="100%" autoplay loop poster="">
        <source src="video.webm" type="video/webm" />
        <source src="video.mp4" type="video/mp4" />
</video>

width="100%" height="100%"

Upvotes: 0

Related Questions