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 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' );以上です。
テーマ『Sydney』で試しました
上記コードはWordPressのテーマ『Sydney』で試しました。
もちろん子テーマを作成した状態です。
結果iPhoneでも自動再生が出来る様になりました。
他のテーマでもwp-custom-headerを利用しているテーマなら、この方法は有効と思います。
お試しあれ。