Header video background – iPhone

Update 29/11/19 – WordPress changes check bottom

So… I replaced my header slider images with a video background as it looked much more appealing. Looked all great on the Macbook Pro, then decided to check the iPhone X and …oh dear, it’s not displaying, just a grey blank image.

I thought this is not on, so contacted the theme support and they told me it’s not possible to display background videos on mobile, I was like, I don’t believe this, did my research on Google – “html5 video autoplay iPhone” and come across this http://walterebert.com/blog/html5-video-autoplay-mobile-revisited/

So there it says you can do it, so I setup a little html page to test and voila it does work, adding the video attributes “playsinline” and “muted”, that’s great so the support was wrong and my satisfaction of being right was close to an extra hot butterfly chicken at Nandos.

Now I knew that it worked on a blank page, I needed to get it working on the actual WordPress homepage of my site in the header.

So as you do, load up the Developer tools in Chrome, to see what’s going on.

So the video has the autoplay and loop attributes but doesn’t have the muted or playsinline ones.

Ok so we need to add those in, after some digging around searching all the WordPress files, I found the wp-custom-header.min.js in wp-includes/js/ was responsible for generating this code.  (Check the wp-custom-header.js for clearer view)

After playing around with the code, adding:

b.setAttribute('playsinline',''),b.setAttribute('muted',''),

in the video element part did the trick:

I then checked my iPhone and it’s still loading a blank grey image and not a video, so some code is detecting it’s screen width or that it’s a mobile device, and changing the appearance for it, but was it the CSS or JS or PHP code doing this?

After more time spent searching, I found the code was actually in the same file 😆

Changing – supportsVideo:function()

{return!(a.innerWidth<b.minWidth||a.innerHeight<b.minHeight)},

to

{return!0},

Fixed, the issue. (Just told it to return true no matter the size)

Ok so now I see that it’s loading correctly on my iPhone, :yay: but…

the video isn’t filling up, and looks ugly with the grey background.

So after some playing around with some CSS code inserted in Appearance->Customize->Additional CSS

.wp-custom-header video {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

This filled it up nicely (:

If you get stuck, you can download my js version from my site here and replace it with your one.

Update 29/11/19:

Replace

t.muted="muted",t.width=this.settings.width

with

t.muted="muted",t.setAttribute("playsinline",""),t.setAttribute("muted",""),t.width=this.settings.width

Replace

{return!(n.innerWidth<i.minWidth||n.innerHeight<i.minHeight)}

with

{return!0}