How to put a video to open in fullscreen automatically in an HTML page?

Question

How to put a video to open in fullscreen automatically in an HTML page?

Asked 7 years ago

Viewed 7,653 times

2

Apparently for a video to stay on fullscreen there needs to be user interaction. Most players, including the native HTML5 has button 'fullscreen'.

I’m building an interactive platform offline, and I need to click a button (teaser), automatically open a player by playing a video on fullscreen and at the end remain in or return to the screen that was:

I thought of these two solutions, which are within my current programming capacity:

1) Create another HTML page with the following codes:

<body class="fadein">

  <video id=video autobuffer autoplay="true">
  <source src="media_v/video.mp4">
  <object type="video/mp4" data="media_v/video.mp4" width="1366" 
height="768">
  </object>
  </video>

<script>
document.getElementById('video').addEventListener('ended',myHandler,false);

function myHandler(e) {
    window.location.href = "menu_option.html";    
}
</script>

It turns out that in this mode it does not take the whole screen, even with the measurements having the native resolution of the screen 1366x768, it leaves a border and I can not put the whole object on screen without the user click the button fullscreen, not even using:

<script>
  var elem = document.getElementById("video");
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
</script>

or

video id=video autobuffer autoplay="true" fullscreen="true"

Exists "fullscreen='true'"?

2) The other way I thought was that by clicking the 'button' already open a video 'as overlay content' in mode fullscreen, like the Facebook player, but in this case I don’t think I even know where to start, so here I am.

Automatic fullscreen videos are impractical, since to open the mode fullscreen we always need the user’s authorization.

– Bsalvo

2017/10/26 at 14:52
I’m aware of that imposition, but how do we get around it? For example I put the video size the same as the native screen resolution that will receive this interface, which will work in fullscreen in Chrome’s "Kiosk" mode. What to do? Since there is still an edge on the object?

– dib

2017/10/26 at 14:54
100% open but controls do not appear. Vaja http://kithomepage.com/sos/Video.htm

– user60252

2017/10/26 at 16:11
Thank you, I’ll check!

– dib

2017/10/27 at 12:09

2 answers

Browser other questions tagged video html5-video fullscreen video-player videojs

You are not signed in. Login or sign up in order to post.

by Bruno Queiroz • 35 points · Answer 1 · 2017-10-26T15:06:59+00:00

1

You can change the style of the video:

 <video id=video autobuffer autoplay="true">
  <source src="media_v/video.mp4">
  <object type="video/mp4" data="media_v/video.mp4"  min-width: 100% min-height: 100%">
  </object>
  </video>

Oops, that was bad... I was referring to the properties of Object type. I don’t know why I wrote "Style"!!! Sorry :(

– Bruno Queiroz

2017/10/26 at 15:59
All right! Thanks for the clarification, but add "min-width: 100% min-height: 100%" does not change anything in my code, and actually would be " min-width= 100% min-height= 100%", I can only use resizing through CSS in video { width:100%; height:100%} out of that it does not accept.

– dib

2017/10/27 at 12:38

by Luiz Santos • **3,162** points · Answer 2 · 2017-10-26T23:10:16+00:00

HTML 5 provides no way to make a full screen video, but the parallel Fullscreen specification provides the requestFullScreen method that allows arbitrary elements (including elements ) to be created in full screen.

Has experimental support in several browsers.

That is, you can use this arbitrary function but you must be attentive because it is not universally accept.

This is how it is implemented:

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})

body {
  margin: 0;
  background: #000; 
}
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;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>

More data: https://www.w3.org/TR/2009/WD-html5-20090423/video.html#video