• 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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する