Make a video be full screen size CSS

Question

I'm using the videojs.com video player and it works great the only problem is that I want the video player to be the full-screen size instead of using pixels like for example if you are on a smaller screen the video player looks messed up. I tried to use 100% instead of px but it also messed up a lot. Is there some other way I can make it fit the whole screen automatically?

<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
  poster="FF7.png"
  data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
 </video>

possible duplicate of [Is there a way to make HTML5 video fullscreen?](http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen) — jaunt, Sep 13 '15 at 16:38

score 7 · Answer 1 · answered Sep 13 '15 at 16:36

7

Check the Codepen here

video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

answered Sep 13 '15 at 16:36

Sachin Kanungo

1,054
9
17

Did not help... Looks even more messed up now :/ https://gyazo.com/678b7bd35604140b9340a8767f733207 – Raven Sep 13 '15 at 16:43
have you had a look at codepen. Just take the code you need, not everything. remove translate if its not helping. And also position fixed – Sachin Kanungo Sep 13 '15 at 16:44
Given that the codepen works and your site doesn't, I feel there might be something particular about your site's HTML or CSS that's interfering. Above the video in the hierarchy, can you find any elements that set a `position` attribute in CSS? – Katana314 Dec 01 '15 at 18:44

score 2 · Answer 2 · answered Dec 01 '15 at 18:37

You can use a parent div container for your video, so it acts like a cross browser anchor for your video. Also you can use the media query min-aspect-ratio and max-aspect-ratio.

Codepen example with editor:

http://codepen.io/jonathan/pen/bEbdmz/?editors=110

Codepen example in fullscreen mode:

http://codepen.io/jonathan/full/bEbdmz/

The HTML

<div id="video-wrapper">
    <video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px" poster="FF7.png" data-setup="{}">
        <source src="FF7.mp4" type='video/mp4' />
        <track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
    </video>
</div>

The CSS:

html, body {
  height:100%;
}

body {
  margin:0;
  padding:0;
}

#video-wrapper {
   position: fixed;
   top: 0; 
   right: 0; 
   bottom: 0; 
   left: 0;
   overflow: hidden;
}

#video-wrapper >  #player {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   cursor:pointer;
}

@media (min-aspect-ratio: 16/9) {
    #video-wrapper >  #player { 
       height: 300%; 
       top: -100%; 
    }
}

@media (max-aspect-ratio: 16/9) {
    #video-wrapper > #player { 
       width: 300%; 
       left: -100%; 
    }
}

And if you want a JavaScript fullscreen solution you could use some of the following:

http://vodkabears.github.io/vide/

http://dfcb.github.com/BigVideo.js/

http://syddev.com/jquery.videoBG/

Make a video be full screen size CSS

2 Answers2