how to make video full screen

Question

i want to make a full screen ?

my old code is like this

    <div id="test"></div>


    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>


with css

#test{
  width: 100%;
  height: 100vh;
    background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-size: 100% 100%;
}

and now i want to change the image with video but full screen so i change like this

<div id="video">
  <div class="embed-responsive embed-responsive-16by9">
      <video id="video1">
          <source src="video/inspiration-1.mp4" type="video/mp4">
      </video>
      </div>
</div>

    <div id="body">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

how to make it full screen with css because it leave like padding-top when i try to run this code??

heres my work https://jsfiddle.net/f0Lcdfrt/4/

Check this topic http://stackoverflow.com/questions/6039909/html5-full-screen-video — Undefitied, Mar 18 '16 at 20:48

score 2 · Answer 1 · answered Mar 18 '16 at 20:48

You can activating fullscreen mode this way

var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

see MDN doc for more https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

score 1 · Answer 2 · answered Mar 18 '16 at 20:51

Video elements can't be made full screen with css. The best you can do is make it width="100%" height = "100%" in the <video> tag. See w3 schools If you truly need full screen you will have to do javascript to request full screen from the browser.

var video = document.getElementById("myvideo");
if (video.requestFullscreen) {
  video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
  video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
  video.webkitRequestFullscreen();
}

You padding issue is due to the `
` tag at the top of the html code. More than likely that is causing your issue. — jagler, Mar 21 '16 at 17:37

score 0 · Answer 3 · answered Mar 18 '16 at 21:25

0

In your fiddle video src is just not correct. In your code try to change this:

<div class="embed-responsive embed-responsive-16by9">
  <video id="video1">
      <source src="video/inspiration-1.mp4" type="video/mp4">
  </video>
  </div>

to this:

<video id="video1" class="embed-responsive embed-responsive-16by9">
    <source src="video/inspiration-1.mp4" type="video/mp4">
</video>

Or just add css:

video {
    width: 100%;
    height: 100%;
}

answered Mar 18 '16 at 21:25

Undefitied

747
5
14

Please check your fiddle link. Now i see `video` has a `src` going to [404](https://fiddle.jshell.net/f0Lcdfrt/4/show/video/inspiration-1.mp4) – Undefitied Mar 18 '16 at 21:32
how to put local video in jsfiddle. i try with link youtube and its didnt run – vicario Mar 18 '16 at 21:36
#Undefitied but in the result i can to slide to the right. doesnt fit to monitor sir – vicario Mar 18 '16 at 22:19
#vicario sorry, don't understand you clearly. Try: https://jsfiddle.net/f0Lcdfrt/8/ – Undefitied Mar 19 '16 at 16:57

score 0 · Answer 4 · answered Mar 21 '16 at 17:40

.wrapper {
    width:100%;
    height:100vh;
    overflow: hidden;
    background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}

from Garconis

how to make video full screen

4 Answers4