WordPress
May 1, 2021

Automatically play WordPress header videos on iPhone

Some WordPress themes automatically play the video in the header.

However, in the case of iPhone, there are conditions for automatic playback.

Unfortunately, automatic playback is not possible with the playback method that uses the standard WordPress functions.

Allows this to be played automatically.

Things to prepare

Child theme

Please be sure to prepare it.

If you do not use the child theme, the customization you will make this time will disappear every time you update WordPress or the parent theme, so be sure to prepare it.

wp-custom-header.js

The “wp-includes” directory in WordPress.
Furthermore, the “js” directory in it.

And there is “wp-custom-header.js” that you are looking for this time.

wordpress >> wp-includes >> js >> wp-custom-header.js

Copy this “wp-custom-header.js” into the child theme.

Customize wp-custom-header.js

Next, customize “wp-custom-header.js” that you copied to the child theme.

The number of lines may differ slightly depending on the version, but please read as appropriate.

There is the following description from around the 289th line.

video.id = 'wp-custom-header-video';
video.autoplay = 'autoplay';
video.loop = 'loop';
video.muted = 'muted';
video.width = this.settings.width;
video.height = this.settings.height;

Rewrite this as follows.

video.id = 'wp-custom-header-video';
video.autoplay = 'autoplay';
video.loop = 'loop';
video.muted = 'muted';
video.setAttribute('playsinline','');
video.setAttribute('muted','');
video.width = this.settings.width;
video.height = this.settings.height;

This completes the customization of “wp-custom-header.js”.

Child theme functions.php customization

Finally, customize the child theme.

Add the following code to the child theme “functions.php”.

function zipang_replace_script_custom_header(){
    wp_deregister_script( 'wp-custom-header' );
    wp_enqueue_script( 'wp-custom-header', get_stylesheet_directory_uri() . '/wp-custom-header.js');
    wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() );
}	

add_action( 'wp_enqueue_scripts', 'zipang_replace_script_custom_header' );

that’s all.

I tried it with the theme “Sydney”

I tried the above code with the WordPress theme “Sydney“.

Of course, the child theme has been created.

As a result, it can now be played automatically on the iPhone.

I think this method is effective for other themes that also use wp-custom-header.

Try it.

Tags
#Sydney