asked on

Make HTML5 video load fullscreen on page load (JS included, but will use recommended code is easier)

Hello, All.

I am trying to make the HTML5 Video, to load Fullscreen on Page Load.
Here is the script I am using.

https://www.thecssninja.com/javascript/fullscreen

It fires on a Button Click.
I tried to add a click event to the body load,
<body onload="click()">
But that of course, did not work.

Could someone please assist on this one?
Thanks.
Code for JS below.

<script>
		(function(window, document){
			var $ = function(selector,context){return(context||document).querySelector(selector)};
			
			var video  = $("video"),
				iframe = $("iframe"),
				domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
				
			var fullscreen = function(elem) {
				var prefix;
				// Mozilla and webkit intialise fullscreen slightly differently
				for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
		          prefix = domPrefixes[i].toLowerCase();
				  
				  if ( elem[prefix + 'EnterFullScreen'] ) {
		            // Webkit uses EnterFullScreen for video
					return prefix + 'EnterFullScreen';
					break;
		          } else if( elem[prefix + 'RequestFullScreen'] ) {
					// Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
					return prefix + 'RequestFullScreen';
					break;
				  }
		        }
		
				return false;
			};
			
			// Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
			var fullscreenvideo = fullscreen(document.createElement("video"));
			
			// Webkit uses "requestFullScreen" for non video elements
			var fullscreenother = fullscreen(document.createElement("iframe"));

			if(!fullscreen) {
				alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
				return;
			}
			
			// Should add prefixed events for potential ms/o or unprefixed support too
			video.addEventListener("webkitfullscreenchange",function(){
				console.log(document.webkitIsFullScreen);
			}, false);
			video.addEventListener("mozfullscreenchange",function(){
				console.log(document.mozFullScreen);
			}, false);

			$("#fullscreenvid").addEventListener("click", function(){
				// The test returns a string so we can easily call it on a click event
				video[fullscreenvideo]();
			}, false);
			$("#fullscreeniframe").addEventListener("click", function(){
				// iframe fullscreen and non video elements in webkit use request over enter
				iframe[fullscreenother]();
			}, false);
		})(this, this.document);
	</script>

Open in new window

ASKER CERTIFIED SOLUTION

Wayne Barron

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chinmay Patel

Hi Wayne,

You can also use this small library to support fullscreen features: https://github.com/sindresorhus/screenfull.js/

if (screenfull.enabled) {
	screenfull.request();
}

Open in new window

Regards,
Chinmay.

Wayne Barron

ASKER

Hey, Chinmay.
I will look into that one.

As for my code above.
The video needs to be 100.

<video width="100%" height="100%" controls id="myvideo">
  <source src="Media\myMovie.mp4" type="video/mp4">
</video>

Open in new window