読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

amp-youtube | AMPにYouTubeの埋め込みを挿入する

f:id:mochizuki_p:20170107174707p:plain

AMPでYouTubeの埋め込みを表示するための専用タグです。

AMPでJavaScriptやiframeが禁止されているために特別に用意されています。

特徴

  • 専用のJavaScriptを読み込む必要がある
  • サイズを指定する必要がある。
  • ビデオの固有IDを入れる必要がある

専用のJavaScript

以下をhead内に追記してください。

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

HTMLでFacebookの埋め込みを利用する場合、以下のようにiframeを利用します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/jhOVibLEDhA" frameborder="0" allowfullscreen></iframe>

一方でAMPの場合は以下のような形式になります。

<amp-youtube
    data-videoid="jhOVibLEDhA"
    layout="responsive"
    width="560" height="315" ></amp-youtube>

通常の埋め込みコードからsrcのURLを抜粋してその動画固有ID

つまり、embed/の後の箇所を抜き出して

data-videoidで指定すればよいのですね

この場合は必須となる要素は、

要素名 説明
width 動画の埋め込み枠の幅 560
height 動画の埋め込み枠の高さ 315
data-videoid 各動画の固有ID jhOVibLEDhA

width, height

レンダリングの計算コストを削減するために事前にサイズを指定しておきます。

data-tweetid

各動画の固有ID

通常の埋め込みコードからsrcのURLを抜粋してその動画固有ID

つまり、embed/の後の箇所を抜き出して

<iframe width="560" height="315" src="https://www.youtube.com/embed/jhOVibLEDhA" frameborder="0" allowfullscreen></iframe>

これからsrcの値である

https://www.youtube.com/embed/jhOVibLEDhA

から

太字で示された数字の部分がIDになります。

これはyoutubeの動画URLのクエリ箇所であるvの値でもあります。