メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web デザイナー

はじめに

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

Gutenberg 無効時と有効時のどちらも説明しています。また、ウィジェットに動画を埋め込むケースにも対応しています。

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

動画の埋め込み方法

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

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

Gutenberg 無効時

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

このショートコードで埋め込んだ動画は、コントロール（再生・一時停止・音声の制御など）が 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 属性により、自動的にブラウザがコントロールを表示します。

また、通常ページを考慮し、preload="metadata" 属性を使っています。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> タグを追加します。

<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() ) {
    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 にて確認できます。

フォローする