AMP対応ページでYouTubeの動画を貼る方法
自分への備忘録。
AMP対応ページでYouTube動画を貼るのは、思ったよりもだいぶ簡単だった。
下記のページを参照すればOK。
具体的には amp-youtube
というタグを使うことになる
https://amp.dev/ja/documentation/components/amp-youtube/
AMP対応ページにYouTubeを貼る手順
head
タグ内で下記のscriptを読み込ませる。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
後はYouTube動画を貼りたい箇所に下記のタグを貼り付ければOK
<amp-youtube data-videoid="6ooMw2FOlN0" layout="responsive" width="480" height="270"></amp-youtube>
上にあるdata-videoid
というのは YouTube URLの下記の部分のこと
https://www.youtube.com/watch?v={data-videoid}
例えば先日自分が貼った下記の動画なら 6ooMw2FOlN0
の部分のことになる。
https://www.youtube.com/watch?v=6ooMw2FOlN0
autoplay
などの属性も扱っているので、ドキュメントをひと通り見て色々と試してみると面白いかも。