Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • websites

Integrating Videos in AMP an Overview

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 مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub