Showcasing your products with <amp-lightbox>

The lightbox is a common UI component that's used for displaying content, such as images and videos. It's usually rendered as a full-screen overlay with a dark background, often with controls to navigate sets of images and to close the lightbox.

Let's get back to our product example page. We'll demonstrate amp-lightbox by adding a lightboxed video. When the user clicks a button, the video will be opened up within a full screen lightbox, and will start playing immediately.

First, we need to include the amp-lightbox component:

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

(Don't forget to include the YouTube component that we saw earlier). We'll start by creating the lightbox that will hold the video, and a button that can be used to launch the video lightbox (full code at /ch5/video-lightbox.html):

<button class="btn-video" on="tap:vid-lightbox">Launch video<...