Home Ask Login Register

Developers Planet

Your answer is one click away!

Bycrome February 2016

how to auto play, full screen and no controls on mobile devices

is there a way to get a full screen video to auto play, with no controls, to work on mobile devices?

The methods I have used have just displayed a play button with a black background.

<video poster="#url#" id="backgroundvideo">
<source src="#url#" type="video/mp4">
<source src="#url#" type="video/ogg">
<source src="#url#" type="video/webm">

backgroundvideo { 
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(#url#) no-repeat;
background-size: cover; 
background-size: 100%;
background-position: center;


SaucedApples February 2016

The bellow will autoplay the source:

<video width="320" height="240" autoplay>
  <source src="changeme.mp4" type="video/mp4">

If you wanted to display a message if the user's browser does not support the method:

<video width="320" height="240" autoplay>
  <source src="changeme.mp4" type="video/mp4">
  Your browser does not support the video.

The above code is supported by the following browsers and their minimum version numbers:

enter image description here

Post Status

Asked in February 2016
Viewed 3,677 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life