AMPでlightboxを使ってYouTubeの動画を表示させる方法

AMPでは写真などを拡大表示させるlightboxも簡単に実装する事ができ、テキストや動画なども表示させることが可能です。
そこで、AMPのlightboxを使って写真とYouTubeの動画を表示させる方法を紹介します。

デモ

AMP Lightbox

まずはAMP Lightboxについて。写真だけを表示させたい場合はここだけで設定はOKです。

拡張コンポーネントを読み込み

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

クリックする前の写真を表示

<amp-img>タグで写真を表示させます。

<amp-img
 src="img/lightbox_1.jpg"
 width="300"
 height="225"
 on="tap:lightbox-1"
 role="button"
 tabindex
 layout="responsive">
</amp-img>

on属性（on=”tap:lightbox-1″）で「lightbox-1」というIDのついた要素を開きます。on属性を付ける時には「role=”button”」と「tabindex」を付けないとエラーになるので注意。

lightboxの設定

写真をクリックした時に表示するlightboxの設定をします。

<amp-lightbox id="lightbox-1" layout="nodisplay" on="tap:lightbox-1.close" role="button" tabindex scrollable>
  <amp-img
   src="img/lightbox_1.jpg"
   width="800"
   height="600"
   on="tap:lightbox-1.close"
   role="button"
   tabindex
   layout="responsive">
  </amp-img>
</amp-lightbox>

先ほどの写真で設定したID「lightbox-1」が<amp-lightbox>に設定されています。これで「lightbox-1」の写真がクリックされると、ここで設定したlightboxが開くようになります。
複数の写真をlightboxで開きたい場合は、IDをそれぞれ固有にしてあげればOKです。

<amp-lightbox>内の<amp-img>では、on属性が「on=”tap:lightbox-1.close”」になっています。
これでlightboxで開いた画像をクリックする事でlightboxが閉じるようになります。
（<amp-lightbox>にも同様の設定をしておくと、どこをクリックしてもlightboxが閉じます）

lightboxの背景をCSS調整

lightboxの背景はamp-lightboxセレクタに背景色、背景画像を設定すればOKです。

amp-lightbox{
 background-image:url(img/bg.png);
}

デモ

AMP YouTube

次にlightboxにYouTubeを表示させます。

拡張コンポーネントを読み込み

まずは拡張コンポーネントを読み込みます。

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

YouTubeの読み込み部分

data-videoid属性にYouTube動画のIDを指定します。動画のIDは動画のURL内の「v=」で表示されています。

例
https://www.youtube.com/watch?v=XmMT5EQ2WoA

<amp-youtube
 data-videoid="XmMT5EQ2WoA"
 width="800"
 height="450"
 layout="responsive">
</amp-youtube>

lightbox内でYouTube動画の表示設定

あとは<amp-lightbox>内でYouTube動画を読み込みます。

<amp-lightbox>に「scrollable」属性が無いと動画が上手く再生できない場合があるので、「scrollable」属性を付けてlightbox内でスクロールできるようにしておきます。
何故なのか？は分かりませんが、「scrollable」属性を付けることで動画が再生できない問題は回避できました。

<amp-img
  src="img/lightbox_2.jpg"
  width="300"
  height="225"
  on="tap:lightbox-2"
  role="button"
  tabindex
  layout="responsive">
</amp-img>


<amp-lightbox
  id="lightbox-2"
  layout="nodisplay"
  on="tap:lightbox-2.close"
  role="button"
  tabindex
  scrollable>
<!-- scrollable属性を付ける！ -->

  <amp-youtube
    data-videoid="XmMT5EQ2WoA"
    width="800"
    height="450"
    layout="responsive">
  </amp-youtube>

</amp-lightbox>

デモ

参考

• YouTube 埋め込みプレーヤーとプレーヤーのパラメータ  |  YouTube IFrame Player API
• amp-lightbox – amp.dev
• amp-youtube – amp.dev

この記事を書いた人

井上 憲作

1975年生まれ。PCパーツの通販サイト管理者から、大手インターネット広告代理店にて、100社以上のコンサルティングやSEO施策に従事したのち、2018年に独立。趣味はスキューバダイビング。