Add video in AMP page

To add and play a video in AMP you can use amp-video markup and script provided by AMP.

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

<!-- Add below HTML markup where you want to load -->
<amp-video width="700" height="500" src="/path/to/video.mp4" poster="/path/to/poster/image.jpg" layout="responsive" controls>
  <div fallback>
    <p>This browser does not support video</p>
  </div>
  <source type="video/mp4" src="/path/to/mp4/video.mp4">
  <source type="video/webm" src="/path/to/webm/video.webm">
</amp-video>

In the code snippet, we are adding a video on our AMP-powered webpage using the amp-video tag. We are also adding a fallback message to the video means if the video does not load or the src is not correct then it will show the fallback message to the user.

Autoplay AMP video

If you want to play the video automatically after it loads, you can add the autoplay keyword to the amp-video HTML tag. Below is the example.

<amp-video width="700" height="450" src="/path/to/video.mp4" poster="/path/to/poster.png" layout="responsive" controls autoplay>
  <div fallback>
    <p>Your browser doesn't support video tag.</p>
  </div>
</amp-video>

Rotate AMP video to fullscreen

If you add the attribute rotate-to-fullscreen to your amp-video then it will turn to fullscreen when you rotate your screen. Below is the example to do that

<amp-video width="700" height="450" src="/path/to/video.mp4" poster="/path/to/poster.png" layout="responsive" controls rotate-to-fullscreen>
  <div class="video-hint">
    <div class="video-hint">Rotate for fullscreen</div>
  </div>
  <div fallback>
    <p>This browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

Was this helpful?