Video Header in iPhone

Hi there,

I have this issue "iPhone Safari Browser doesnt play automatically and it opens up in a seperate window"… this is actually awkward…

I did check out the below link

https://wordpress.org/support/topic/autoplay-header-video-on-mobile-is-not-working-iphone-ipad

and understood that the below codes needs to be addded

But, Can you pls let me know where should I add these codes and which files should I edit ?

Thanks in advance…

Thank you for reaching out to use. We’d like to help. But it looks like you didn’t post the code. Would you mind reposting it?

Regards,
Kharis

<video controls autoplay loop muted playsinline>

Hello there,

I am sorry, I found playsinline video attribute is still unachievable because it’s unsupported in the current WordPress video header system. However, since it’s related to WordPress core code, I’d strongly encourage you find out the exact answer from WP.org’s support forum.

Regards,
Kharis

Oops…

That’s a bad news !!!

Is there any plugins that I can use to achieve this ?

Hi Kharis,

I came across this site… (https://webbersky.com/2018/04/11/header-video-background-iphone/)

and added

b.setAttribute(‘playsinline’,”),b.setAttribute(‘muted’,”), in the wp-custom-header.min.js file but still it doesnt work…

Can you help here ? Are these the same codes that needs to be used for Sydney also ?

The wp-custom-header.min.js file is part of core files of WordPress system. And it’s really out of the theme author’s responsibility. Furthermore, editing it will cause us future WordPress update. As I said, you should contact the WP.org’s support. I am sorry, that’s out of the scope of support service we can offer.

Please note that our support forum is not aimed for general WordPress issues discussion, but specifically for our own products.

Thank you for your understanding.

Regards,
Kharis

Fine Kharis,

I understand … Just for the information of others who might find it useful… The above editing of wp-custom-header.min.js worked for me…

Now, the issue is with the Theme… Can you help me remove these video controls ? (Attached the screenshot for your reference).

I tried a couple of other themes with video header but I dont see these video controls there… hence the issue narrow downs to sydney theme

Hope you can help me atleast in this … Thanks for all your support and help …

Hello there,

Please share your final modifications done in wp-custom-header.min.js file. So I can replicate it in my test site and might be able to get some extra code to disable default video control on mobile.

Regards,
Kharis

Thank you Kharis !!! Thanks a ton…

So, here we go…

I made the following two modifications in wp-custom-header.min.js

  1. Changing - supportsVideo:function()

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

to

{return!0}

  1. adding:

b.setAttribute(‘playsinline’,”),b.setAttribute(‘muted’,”),

You can view the file at http://35.225.87.167/wp-includes/js/wp-custom-header.min.js

The next file what I modified is wp-custom-header.js… The modifcations are as follows: (Attached the screenshot for your ref

That’s it…

Now what happens is the video is working perfectly fine inline but

  1. The native video controls appear exactly after the full page is loaded and stays there for about less than 3 secs

  2. The native video controls also appear when you change the orientation from portrait to landscape or when you scroll down the page and again go to the header.

  3. It is also noticed that the video enters pause mode when you switch back to safari with video controls visible…

Thanks again for all your great extended support on this !!!

Thanks a lot

Thank you for sharing the code. I think you need to implement this extra code.

Regards,
Kharis