• websites

Integrating Videos in AMP an Overview


There many different ways to integrate videos in AMP HTML files. Here is a list of all currently supported video formats and platforms.


Import the libraries. We used several examples that have to be imported. We start with amp-instagram

<script async custom-element="amp-instagram" src=""></script>

Import amp-vine for the vine example.

<script async custom-element="amp-vine" src=""></script>

Import amp-youtube for the youtube example.

<script async custom-element="amp-youtube" src=""></script>

Import amp-vimeo for the vimeo example.

<script async custom-element="amp-vimeo" src=""></script>

Import amp-dailymotion for the dailymotion example.

<script async custom-element="amp-dailymotion" src=""></script>

Import amp-twitter for the twitter example.

<script async custom-element="amp-twitter" src=""></script>

Import amp-facebook for the facebook example.

<script async custom-element="amp-facebook" src=""></script>

Import amp-brightcove for the brightcove example.

<script async custom-element="amp-brightcove" src=""></script>

Import amp-iframe for the iframe example.

<script async custom-element="amp-iframe" src=""></script>

Import amp-video for the video example.

<script async custom-element="amp-video" src=""></script>

Embed your own Video with amp-video

Use amp-video for hosted videos. Find more examples here.

Your browser doesn't support HTML5 video.

<amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  <source type="video/mp4" src="/static/samples/video/tokyo.mp4">
  <source type="video/webm" src="/static/samples/video/tokyo.webm">

Supported Video Platforms


Use amp-brightcove for Brightcove videos. Find more examples here.

<amp-brightcove data-account="906043040001" data-video-id="1401169490001" data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c" layout="responsive" width="480" height="270">


Use amp-dailymotion for dailymotion videos. Find more examples here.

<amp-dailymotion data-videoid="x3rdtfy" layout="responsive" data-ui-highlight="FF4081" width="480" height="270">


Use amp-facebook for Facebook videos. Find more examples here.

<amp-facebook width="552" height="310" layout="responsive" data-embed-as="video" data-href="">


Use amp-instagram for videos on Instagram. Find more examples here.

<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">


Use amp-twitter for Twitter videos. Find more examples here.

<amp-twitter width="375" height="472" layout="responsive" data-tweetid="707569406105092096">


Use amp-vimeo for Vimeo videos. Find more examples here.

<amp-vimeo data-videoid="27246366" layout="responsive" width="16" height="9">


Use amp-vine for Vine embeds. Find more examples here.

<amp-vine width="400" height="400" layout="responsive" data-vineid="bpxmJaHED09">


Use amp-youtube for YouTube videos. Find more examples here.

<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y">

What if your Video Provider is not Supported?

Use amp-video-iframe for videos not supported in AMP. Find more examples here.

<amp-video-iframe id="myVideo" src="/static/samples/files/custom-video-player.html" width="317" height="210" layout="responsive" autoplay>
             <amp-img placeholder src="/static/samples/img/bird.jpg" layout="fill">

如果此页面上的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例