AMP対応のYouTube動画を埋め込む方法 | 今村だけがよくわかるブログ

私個人的にですが、Webサイトを「AMP（Accelerated Mobile Pages Project）対応して欲しい」という依頼が増えてきました。

このブログでも使っているWordPressですと、AMP対応できる便利なプラグインがすでに開発されていて、プラグインを有効にするとすぐに対応できます。

プラグインを使って対応する方法もアリなんですが、プラグインを使わずに対応する必要も依頼によっては出てきていますので、今後のためにメモ書きとして対応したことを少しずつ書くことにしました（いずれ「AMPとは何なのか」「AMP対応することで何が嬉しいのか」など書いて行こうと考えています）

というわけで、今回はAMP対応ページにYouTube動画を埋め込む方法について書きました。興味がある方はご参考ください。対応については、AMPのドキュメント「amp-youtube.md」を参考にしています。

スクリプトを読み込もう

まず、YouTube動画をAMP対応させるためには「<head></head>」内に以下のスクリプトを読み込みます。

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

読み込み順はドキュメントを参考にして「<meta charset=”utf-8″>」以降に読み込み「<style amp-boilerplate>」の前に読み込みました。スクリプトを読み込んだら、次はYouTube動画の埋め込みコードについて見ていきましょう。

ではさっそくやります。今回は公式チャンネル「Street Fighter」から、以下の動画を例にします。

動画のURLは

https://www.youtube.com/watch?v=fJAuNd7cuu4

です。

「このYouTube動画を自分のWebサイトに埋め込みたい！」と思ったら、動画のURLにアクセスして「埋め込みコード」を取得して、そのコードをWebサイト（ブログの本文などに）貼り付けるとできます。これが基本です。（埋め込みできない場合はコードは表示されず、取得できません）

WordPressを使っている方なら、埋め込み可能なYouTube動画のURLを本文に貼り付けるだけで、自動で上の画像のような埋め込みコードが作られます。

AMPに話を戻しますが、YouTube動画をAMPに対応させるには「<amp-youtube></amp-youtube>」というAMP専用の要素を使って下のように書く必要があります。

<amp-youtube
 data-videoid="fJAuNd7cuu4"
 layout="responsive"
 width="480"
 height="270"></amp-youtube>

要素内にある属性と、その説明を以下にまとめました。

特に気を付けないといけないのは「data-videoid」属性に動画のIDを入れることですね。今回例にした動画のURLは

https://www.youtube.com/watch?v=fJAuNd7cuu4

なので、動画のIDは

fJAuNd7cuu4

です。

動画のIDを今まではあまり気にする事がなかったかもしれませんが、AMP対応させるためには気を付けよう、ということですね。

また、「layout」属性のレスポンシブ対応は、昨今のWebサイトのトレンドからすると、必ず入れておいてもいいんじゃないかと思います。（閲覧する端末によって、動画のサイズを比率を保持したまま拡大・縮小してくれます）

ということで「YouTube動画をAMP対応させるにはこんなことをするよ」という内容を書きました。もし参考になる箇所がありましたら、拾えるところだけ拾っていただけますと嬉しいです。

他にもAMP対応についてのページがありますので、興味がありましたらご参考ください。