0

Is it possible to set a video to full screen on page load?

So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.

var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

I use Popcorn.js for playing the video on startup.

I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).

Using JavaScript, as suggested by Will, I also can't seem to get it to work properly

var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
    vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
Anonymous
  • 11,748
  • 6
  • 35
  • 57
Firen
  • 272
  • 1
  • 13
  • 1
    you can try something like this http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos – Dhiraj Jun 02 '15 at 15:41
  • Or this: http://stackoverflow.com/questions/17106131/request-full-screen-html5-video-onplay – Will Jun 02 '15 at 15:42
  • http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen also, it has to be full screen or can be full page? Inside the page is possible. – eri0o Jun 02 '15 at 15:44
  • if you mean you'd like the browser to go into fullscreen mode (F11) upon visiting your page, you could possibly hack this action but browsers would fight you - i'd be surprised if this wasnt specifically prohibited in the specs - and users would probably hate you too, it'd be awful for the user to immediately have their screen commandeered by your web page. Recommend against this action. If you are after video in the viewport (the entire page within the browser window) then this is easily done: https://www.google.co.uk/?gws_rd=ssl#safe=off&q=fullscreen%2Bhtml5%2Bvideo%2Bexample – Anthony Cregan Jun 02 '15 at 18:41
  • Sorry, wanted to write more. @Anonymous I did research and found one possible WORKING solution, which was posted in the original question. Problem being that it only filled the *Page* not the *Screen*. DhirajBodicherla and Elric posted the solution I used in the fiddle Will was helpful, I edited my post using the resources from his link. – Firen Jun 03 '15 at 13:27
  • @MichaM. My mistake. I saw the infamous "I did research" in your post and assumed you were just stating that as fact. I would suggest never mentioning that as it should be obvious from the post already and just adds fluff to the post. Also, I would suggest spell checking, using stack snippets instead of a fiddle, and not saying "**edit**" since all edits can be found in the edit history. I have made these changes, but feel free to change anything you don't like. :) – Anonymous Jun 03 '15 at 15:14
  • Was not aware of this feature, ty very much @Anonymous – Firen Jun 08 '15 at 07:45
  • This might be of interest http://stackoverflow.com/questions/9454125/javascript-request-fullscreen-is-unreliable – Philip Kirkbride Nov 21 '16 at 15:25

0 Answers0