ヘッダーメディアで設定した動画がPCやAndroidでは自動再生されるけれどiPhoneで自動再生されない…という状態の対処方法を紹介します。
ヘッダーメディアの自動再生対処コード
いきなり結論から。
ヘッダーメディアで動画ファイルを指定したときにiPhoneでも自動再生されるようにしたサンプルコードはこちら▼
add_action( 'wp_enqueue_scripts', function() {
if ( ! is_header_video_active() || ! has_header_video() ) {
return;
}
wp_add_inline_script(
'wp-custom-header',
'document.addEventListener( \'DOMContentLoaded\', function() {
var video = document.getElementById( \'wp-custom-header-video\' );
if( video && ! video.hasAttribute( \'playsinline\' ) ) {
video.setAttribute( \'playsinline\', \'\' );
}
});'
);
} );functions.phpなどにコピー＆ペーストで基本的には動作すると思います。
うまく動かなかった場合はテーマとの相性などもあると思いますので適宜調整してください。
動画表示用のHTMLを挿入する処理が書かれたJavaScriptにインラインでplaysinline属性を追加する処理を追加しています。
ヘッダーメディア追加の処理が書かれたJS(custom-header.js)の中でvideo.playsInline = true;が指定されていますが、どうやらそれだけではうまく動かないようで、後からplaysinline属性を追加する形にしました。
ひとまずWordPressコアファイルをいじること無く対処できたのでよかったかなと思います。ただ、WordPress本体のアップデートやiOSのアップデートで上記コードが不要になったり、動かなくなる可能性もあるのでそのときはまた調整ですね。
ではまた。