HTML5 video background on iPad/iphone

Question

I used this solution to use an html5 video as the background of my site.

However, it doesn't seem to work on iPad/iphone, all I am getting is a black screen, and the video is not resizing.

Also, the video does not resize correctly when the aspect ratio of the window is not the same as the aspect ratio of the video. You will see that the background image begins to become visible.

Thanks!

No, the answer he pointed to is specifically around HTML5. What format is your video in? Where's your code? It's hard to help with no example. — tkone, Feb 13 '12 at 12:33
apparently its "bad form" to use video background on mobile sites since mobile data costs are still a "scam" levels. I get 500 mb a month from Rogers in Canada.. overage $5 per 100mb. — Michael Fever, Dec 12 '14 at 03:00

score 30 · Answer 1 · edited Apr 27 '16 at 18:14

In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip. It uses an adapted version of HTML canvas video player script by Stanko;

<div class="video-responsive">
  <video class="video" muted="muted" loop="loop" autoplay="autoplay">
  <source src="mY_movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
  </video>

<canvas class="canvas"></canvas>        

<div id="over_video">Look at me</div>
</div>

The script is used as follows

<script src="canvas-video-player.js"></script>
<script>

var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIOS) {

    var canvasVideo = new CanvasVideoPlayer({
        videoSelector: '.video',
        canvasSelector: '.canvas',
        timelineSelector: false,
        autoplay: true,
        makeLoop: true,
        pauseOnClick: false,
        audio: false
    });

}else {

    // Use HTML5 video
    document.querySelectorAll('.canvas')[0].style.display = 'none';

}   

</script>

The CSS is

body {
background: #000;
padding:0;
margin:0;
}
.video-responsive {
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

.canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
font-size: 12vw;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20%;
text-shadow: 4px 4px 4px #5C433B;
}

Hope it can help.

I have spent few days because of this and only your solution is working! Thank you! — RydelHouse, Oct 31 '16 at 13:15
I cannot make this work in a .PHP page, how can that be done ? — Tibbe, Sep 18 '17 at 16:44
it looks like this isn't necessary anymore - i've posted a new answer too, Stanko themselves say that since ios10 this is depreciated, see the solution here: https://webkit.org/blog/6784/new-video-policies-for-ios/ — amcc, Jan 31 '18 at 01:13

score 11 · Answer 2 · answered May 05 '17 at 07:25

11

Just mark as record. Nowadays, the ability of background video get supported (iOS 10 +) due to the new policies of WebKit.

To be specific, check out the official document below. https://webkit.org/blog/6784/new-video-policies-for-ios/

answered May 05 '17 at 07:25

Chien Chieh Wang

151
1
3

+1 This ist the actual answer nowadays! Though certain conditions need to fulfilled, such as that the video needs to be muted to make this work, this is the appropriate way to do it. – conceptdeluxe Sep 08 '17 at 10:31
* Audio must be muted or the video has no audio track * Autoplay has to be set * Use the `playsinline` tag (videos will play in the normal browser view instead of going fullscreen) – t0vana Jan 22 '19 at 18:05

score 9 · Answer 3 · answered Jan 31 '18 at 01:09

Since iOS10 there is a solution, see here: https://webkit.org/blog/6784/new-video-policies-for-ios/

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. <video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone. When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.

This should be the accepted answer now. In React, the attribute has to be `playsInline`. — Fabian von Ellerts, Mar 04 '19 at 12:09

score 7 · Answer 4 · edited Sep 18 '12 at 10:16

7

Unfortunately, the iPad doesn't support automatic video play, so you'd need a play/stop/pause button. Here's an example of something that does work on iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

edited Sep 18 '12 at 10:16

Community

1
1

answered Feb 15 '12 at 10:59

Bekki

79
1

Im noticing the video doesnt play on iPad os7 safari unless i hit pause, then play again. perhaps this is because the video is trying to be started before it is loaded? – Slopeside Creative Oct 02 '13 at 18:56

score 6 · Answer 5 · edited Dec 02 '15 at 12:26

6

SquareSpace uses an interesting approach to "simulating" video on their website by using a clever loop of .pngs and overlays. See http://www.squarespace.com/

If you sift through the HTML you will find the hand sequence here: http://cf.squarespace.com/details/musician-hand-sequence-hires.png

It works on phones.. Just something to think about.

edited Dec 02 '15 at 12:26

sventevit

4,766
10
57
89

answered Apr 14 '14 at 16:23

Gilberto

63
1
5

score 3 · Answer 6 · answered Dec 02 '15 at 12:24

The only way to autoplay videos on mobile devices is to ditch the html video tag.

I see three options, assuming you don't need audio:

Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.

I went for the last solution and it works fine.

score 3 · Answer 7 · answered Dec 02 '15 at 12:41

I have stumbled upon something that might help you with this task..

http://vagnervjs.github.io/frame-player/

Its a JS player that receives a JSON list of images representing frames of the video.

This will also provide flexibility with regards to styling options of the video itself and responsiveness..

You could load a different set of images (lower in quality) to suuport IPADs vs. desktop support for instance.

score 1 · Answer 8 · answered Jan 07 '16 at 11:14

1

Most easiest way I think, just use gif for background. For example you can convert it online like in http://ezgif.com/video-to-gif

answered Jan 07 '16 at 11:14

Arnoldas

316
2
9

HTML5 video background on iPad/iphone

8 Answers8

Linked