AMP: Building Accelerated Mobile Pages

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). ...