Web制作

SafariでWordPressサイトを見たときに、動画（videoタグ）のサムネイル画像が表示されない時の対処法

備忘録。

クラシックエディターとかで動画を埋め込んで記事を公開した時に、Safari限定でサムネイル画像が表示されない事象が発生した。

下記をfunctions.phpに記述して解消した。

function custom_video_shortcode_defaults($settings) {
 $settings['preload'] = 'auto';
 return $settings;
}
add_filter('shortcode_atts_video', 'custom_video_shortcode_defaults');

原因としては、WordPressのビデオショートコードの仕様によるものっぽい。

WordPressのビデオショートコードは、デフォルトで <video> タグの preload 属性を “metadata” に設定する。これはビデオのメタデータのみを事前にロードし、実際のビデオデータのロードはユーザーが再生を開始するまで遅延する、というものになる。Safariではこの設定がビデオのサムネイル表示に影響を与えることがあり、そのためビデオエリアが透明に見える（＝サムネイル画像が表示されない）可能性ということが発生するようだった。

なので、上記コードを書いて、preload属性を「auto」として出力するようにしたことで、問題解消しましたとさ。

TOP