Adding video to AMP pages

Why stop at images? Video is used widely in all kinds of sites, including e-commerce and news pages. Let's add a promotional video to our product page. There are different ways to do this depending on whether the video is self-hosted or provided by a third-party video service, such as YouTube.

Hosting your own videos with <amp-video>

The first way to embed video in AMP is to use amp-video. This is an AMP replacement for the HTML5 video tag. You should use this if you want to host the video yourself.

First, as usual, you need to import the component:

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

Then you can use it like this:

<amp-video width="640" height="480" 
           src="https://theampbook.com/ch5/video/videoclip.mp4"
           poster="video-snaphsot.jpg" controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video</p>
  </div>
  <source type...