私個人的にですが、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動画の埋め込み方法についてちょっとおさらいしよう
「このYouTube動画を自分のWebサイトに埋め込みたい！」と思ったら、動画のURLにアクセスして「埋め込みコード」を取得して、そのコードをWebサイト（ブログの本文などに）貼り付けるとできます。これが基本です。（埋め込みできない場合はコードは表示されず、取得できません）
埋め込みコードが取得できます
WordPressを使っている方なら、埋め込み可能なYouTube動画のURLを本文に貼り付けるだけで、自動で上の画像のような埋め込みコードが作られます。
YouTube動画をAMPに対応してみよう
AMPに話を戻しますが、YouTube動画をAMPに対応させるには「<amp-youtube></amp-youtube>」というAMP専用の要素を使って下のように書く必要があります。
<amp-youtube data-videoid="fJAuNd7cuu4" layout="responsive" width="480" height="270"></amp-youtube>
要素内にある属性と、その説明を以下にまとめました。
| data-videoid | 動画のID |
|---|---|
| layout | レスポンシブ対応させる場合は「responsive」 |
| width | 動画の幅 |
| height | 動画の高さ |
特に気を付けないといけないのは「data-videoid」属性に動画のIDを入れることですね。今回例にした動画のURLは
https://www.youtube.com/watch?v=fJAuNd7cuu4
なので、動画のIDは
fJAuNd7cuu4
です。
動画のIDを今まではあまり気にする事がなかったかもしれませんが、AMP対応させるためには気を付けよう、ということですね。
また、「layout」属性のレスポンシブ対応は、昨今のWebサイトのトレンドからすると、必ず入れておいてもいいんじゃないかと思います。（閲覧する端末によって、動画のサイズを比率を保持したまま拡大・縮小してくれます）
まとめ
ということで「YouTube動画をAMP対応させるにはこんなことをするよ」という内容を書きました。もし参考になる箇所がありましたら、拾えるところだけ拾っていただけますと嬉しいです。
AMP対応についての情報をお探しの方は
他にもAMP対応についてのページがありますので、興味がありましたらご参考ください。
このページを共有する