Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • websites

Integrating Videos in AMP an Overview

デモを表示する Playground で開く

Introduction

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

Setup

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

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

Import amp-vine for the vine example.

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

Import amp-youtube for the youtube example.

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

Import amp-vimeo for the vimeo example.

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

Import amp-dailymotion for the dailymotion example.

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

Import amp-twitter for the twitter example.

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

Import amp-facebook for the facebook example.

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

Import amp-brightcove for the brightcove example.

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

Import amp-iframe for the iframe example.

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

Import amp-video for the video example.

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></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>
  </div>
  <source type="video/mp4"
    src="/static/samples/video/tokyo.mp4">
  <source type="video/webm"
    src="/static/samples/video/tokyo.webm">
</amp-video>

Supported Video Platforms

amp-brightcove

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">
</amp-brightcove>

amp-dailymotion

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">
</amp-dailymotion>

amp-facebook

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

<amp-facebook width="552"
  height="310"
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

amp-instagram

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

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

amp-twitter

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

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

amp-vimeo

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

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

amp-vine

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

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

amp-youtube

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

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

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-img>
</amp-video-iframe>
さらに説明が必要ですか？

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか？

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

GitHub でサンプルを編集する