at backyard

Color my life with the chaos of trouble.

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 などの属性も扱っているので、ドキュメントをひと通り見て色々と試してみると面白いかも。