AMP-YouTubeを使ったYouTube動画の埋め込み表示を実装する方法
AMPコンポーネントのamp-youtubeを利用してAMPページ内でYouTube動画の埋め込み表示を実装するサンプルコードです
See the Pen AMP-YouTube by yochans (@yochans) on CodePen.
amp-youtubeを読み込む
amp-youtubeを利用するには、AMPコンポーネントのamp-youtube-0.1.jsを読み込む必要があります
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
AMP版YouTube動画の埋め込みサンプルコード
HTML
<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y"> </amp-youtube>
amp-youtubeでも<amp-youtube>にてスタイル属性を適用させる事が可能です
サンプルではlayout="responsive"を指定していますがlayout="fixed-height"やlayout="fixed"なども指定可能です
layout="responsive"の場合、親要素に合わせてレスポンシブ表示になるので幅や高さの数値は縦横比を考慮して調節すればOKです
PCでの表示時用にCSSで親要素または<amp-youtube>本体に最大横幅を指定しておくと大きくなり過ぎなくて良いですね
amp-youtube{
max-width:500px;
}amp-youtubeにて指定可能な属性
| layout | 必須 | fixed、fixed-height、responsive、fill、flex-item、nodisplay |
| width | 基準となる横幅 | |
| height | 基準となる高さ | |
| data-videoid | 必須 | YouTube動画のID |
| data-param | 埋め込みYouTube動画のパラメータ | |
| autoplay | 自動再生、ONにする時はautoplayと記述 |