WordPressのヘッダー動画をiPhoneでも自動再生させる

WordPressのテーマによってはヘッダーで動画を自動再生させる物もあります。

ただiPhoneの場合は自動再生させるには条件があります。

残念な事にWordPress標準機能を利用した再生方法の場合は、自動再生が出来ません。

これを自動再生出来る様にします。

準備する物

子テーマ

必ず用意してください。

今回行うカスタマイズは、子テーマを利用しないとWordPressや親テーマをアップデートする度に消えますので、必ず用意してください。

wp-custom-header.js

WordPress内にあります『wp-includes』ディレクトリ。
さらにその中にある『js』ディレクトリ。

そしてその中に今回お目当ての『wp-custom-header.js』があります。

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

この『wp-custom-header.js』を子テーマ内にコピーします。

wp-custom-header.jsのカスタマイズ

次に子テーマにコピーした『wp-custom-header.js』をカスタマイズします。

バージョンによっては多少行数が異なるかもしれませんが、適時読み替えてください。

約289行目辺りから以下の記述があります。

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;

これを下記の様に書き換えます。

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;

以上で『wp-custom-header.js』のカスタマイズは終了です。

子テーマのfunctions.phpのカスタマイズ

最後に子テーマのカスタマイズです。

子テーマの『functions.php』に以下のコードを追記します。

function b2n_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', 'b2n_replace_script_custom_header' );

以上です。