AMP-YouTubeを使ったYouTube動画の埋め込み表示を実装する方法

2019年4月8日AMP

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と記述

2019年4月8日AMPAMPコンポーネント

Posted by ヨウスケ