WordPress で video タグの動画を AMP に対応する方法

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

WordPress のメディアにアップロードした動画を AMP に対応する方法の紹介です。

Gutenberg 無効時と有効時のどちらも説明しています。

また、ウィジェットに動画を埋め込むケースにも対応しています。

尚、HTTPS サイトを前提にした説明です。HTTP サイトでは、AMP エラーが出ます(Gutenberg の「動画」ブロックを使う場合は、SSL 化が必須 )。

動画の埋め込み方法

WordPress のメディアにアップロードした動画を使うには、エディターより本文中に動画を埋め込みます。

ただ、Gutenberg が無効になっているか有効になっているかで、動画の埋め込み方法が異なります。

Gutenberg 無効時

Gutenberg が無効時に「メディアを追加」で動画を埋め込むと、WordPress のショートコードが使われます。

このショートコードで埋め込んだ動画は、コントロール(再生・一時停止・音声の制御など)が下の画像のように WordPress 独自のものに。

これは「embed 機能」で埋め込んだ場合も同様です。

WordPress 独自のコントロールは JavaScript と CSS で表現されています。一方、AMP での動画のコントロールは、ブラウザが自動的に表示するもの。

そのため、「メディアを追加」や「embed 機能」で動画を埋め込むと、通常ページと AMP ページとで異なるコントロールになってしまいます。

サイトデザインでは、1 つのサイトに 1 つのデザインが原則。

原則に従うために「メディアを追加」や 「embed 機能」は使わず、<video> タグで動画を埋め込みます。

<video controls preload="metadata">
  <source src="動画のURL">
</video>

あるいは、こちらの書き方でも構いません。ただし、こちらの書き方は、SSL 化が必須です。HTTP サイトは、AMP エラーが出ます。

<video controls preload="metadata" src="動画のURL"></video>

controls 属性で、自動的にブラウザがコントロールを表示します。

また、通常ページを考慮し、metadata を指定した preload 属性を使っています。preload 属性については、下記リンクの MDN をご参考ください。

<video>: 動画埋め込み要素:preload

Gutenberg 有効時

Gutenberg を有効時は、「一般ブロック」の「動画」で動画を埋め込みます。

この「動画」ブロックを使うと、<figure> タグで囲まれた <video> タグで動画が埋め込まれます。

<figure class="wp-block-video">
  <video controls src="動画のURL"></video>
</figure>

ただし、SSL 化が必須です。HTTP サイトでは、AMP エラーが出ます。

スクリプトの読み込み

AMP で <video> タグの動画を表示するには、AMP 拡張コンポーネント amp-video の使用が必須です。

amp-video を使うために、AMP ページの <head> 内でスクリプトを読み込みます。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

functions.php にコードを追加

あとは、AMP ページで <video> タグを <amp-video> タグに置き換えると終わりです。

Gutenberg が無効でご自身で <video> タグを書く場合にも、Gutenberg が有効で「動画」ブロックを使う場合にも、下記コードをテーマの functions.php に追加します。

function my_convert_content_for_amp( $content ) {
  if ( is_amp() === false ) {
    return $content;
  }
  
  /** video 開きタグを置換 */
  $pattern = '<video';
  $append  = '<amp-video layout="responsive" width="16" height="9"';
  $content = str_replace( $pattern, $append, $content );
  /** video 閉じタグを置換 */
  $content = str_replace( '</video>', '</amp-video>', $content );
  
  return $content;
}
add_filter( 'the_content', 'my_convert_content_for_amp', 999999999 );

AMP ページであるかの判別には、is_amp() を使っています。判別関数が異なる場合は、2 行目の変更が必要です。

また、8 行目の width="16" height="9" は、動画のアスペクト比に合わせて変更します。

コードは「WordPress の投稿本文を AMP 化する方法」を参考にしました。

ウィジェットを使う場合

投稿本文以外で <video> タグを使う場合は、上記のコードでは <amp-video> タグに置き換えしません。

サイドバーなどに「テキスト」ウィジェットや「カスタム HTML」ウィジェットで <video> タグを使う場合は、下記のコードも functions.php に追加します。

add_filter( 'widget_text','my_convert_content_for_amp', 999999999 );

ウィジェットに書く HTML は、Gutenberg 無効時 の HTML と同じです。

ウィジェットに HTML を書く際は、「テキスト」ウィジェットより「カスタム HTML」ウィジェットがおすすめです。

「テキスト」ウィジェットは、<p> タグや <br> タグを自動で挿入するため、HTML を書くのには適していません。

アレンジ

amp-video は、動画の機能を追加する属性が用意されています。

functions.php のコードを変更すれば、任意の動画の機能を追加できます。その属性をいくつか紹介します。

変更箇所は、この部分です。

$append  = '<amp-video layout="responsive" width="16" height="9"';

尚、属性の詳細は、下記リンクの AMP 公式サイトにてご覧いただけます。

amp-video:Attributes

自動再生:autoplay

属性 autoplay の指定で、動画が画面内に入ったタイミングで自動的に再生されます。

指定方法は、単に autoplay を追加するだけです。

$append  = '<amp-video autoplay layout="responsive" width="16" height="9"';

ループ再生:loop

属性 loop の指定で、動画が最後に達すると最初から繰り返し再生します。

指定方法は、こちらも単に loop を追加するだけです。

$append  = '<amp-video loop layout="responsive" width="16" height="9"';

デバイスを横向きにすると全画面表示:rotate-to-fullscreen

属性 rotate-to-fullscreen の指定で、スマホなどのデバイスを横向きにすると動画が全画面に表示されます。

$append  = '<amp-video rotate-to-fullscreen layout="responsive" width="16" height="9"';

この rotate-to-fullscreen が動作するには、いくつかの条件があります。

  • デバイスで「自動回転」が許可されている。
  • ユーザーの操作により、動画が再生される必要がある。autoplay による自動再生の場合は、自動再生後にユーザーが動画をタップする必要がある。
  • 動画が再生中でなければならない。

仕様の詳しい説明は、AMP 公式の GitHub で解説されています。

Video in AMP:Rotate-to-fullscreen

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。