Embeds an iframe containing a video player.


Required Scripts


Ví dụ

When should I use this?





  4. If you're a 3rd party video vendor, you can use amp-video-iframe to provide a simple way for authors to embed video.



  • By default, an amp-video-iframe is sandboxed.



  • amp-video-iframe is not scrollable.


Usage of amp-video-iframe for advertising


Advertising use cases should use amp-ad instead.

The reasons for this policy are that:


  • amp-video-iframe has no controlled resize mechanism.


poster URL to an image displayed while the video loads. It's recommended to always set this attribute for best perceived performance.
common attributes This element includes common attributes extended to AMP components.
referrerpolicy The referrerpolicy to be set on the iframe element.
data-param-* All data-param-* attributes are added as query parameters to the iframe's src. They may be used to pass custom values through to the player document.
Keys and values will be URI encoded. Keys will be camel cased.
  • data-param-foo="bar" becomes &foo=bar
  • data-param-channel-id="SOME_VALUE" becomes &channelId=SOME_VALUE


Include an amp-video-iframe on your AMP document:


my-video-player.html is the inner document loaded inside the frame that plays the video. This document must include and bootstrap an integration script so that the AMP document including the <amp-video-iframe> can coordinate the video's playback.

Third-party video vendors

If you're a vendor that does not provide a custom video player component, you can integrate with AMP in the form of an amp-video-iframe configuration, so authors can embed video provided through your service.

For most video providers, amp-video-iframe provides enough tools for common playback actions (see methods and events). Refer to the vendor player spec for more details on whether you can use amp-video-iframe or you should build a third-party player component instead.

As a vendor, you can serve a generic integration document that references provided videos via URL parameters. AMP authors who use your video service only need to include an <amp-video-iframe> tag in their documents:

  data-param-* attributes are added to src and poster, so this would use the
  following composed urls:

  src: https://vendor.example/amp-video-iframe

  poster: https://vendor.example/poster.jpg

The src and poster URLs are appended with data-param-* attributes as query string.

The /amp-video-iframe document bootstraps the integration script so that the AMP document can coordinate with the player.

If you're a vendor hosting an integration document, feel free to contribute a code sample to this page, specifying your provided src and usable data-param-* attributes.

Integration inside the frame



<!-- Wait for API to initialize -->
  (window.AmpVideoIframe = window.AmpVideoIframe || []).push(

  function onAmpIntegrationReady(ampIntegration) {
    // talk to each other.




Readymade integrations

If you're using a common video framework like JW Player or Video.js, you can call listenTo() for a basic, readymade integration. These integrations support all playback and UI controls when the framework provides them, see each for supported methods.



For JW Player



The amp object knows how to setup a JwPlayer instance by using listenTo('jwplayer'). If you're embedding your player using a video-specific script, you only need to register Jwplayer usage:

<script src=""></script>
  (window.AmpVideoIframe = window.AmpVideoIframe || []).push(function (
  ) {

Otherwise, pass in your JwPlayer instance through the signature amp.listenTo('jwplayer', instance):

) {
  ampIntegration.listenTo('jwplayer', jwplayer('my-video'));
For Video.js




function onAmpIntegrationReady(ampIntegration) {
  ampIntegration.listenTo('videojs', myVideo);


function onAmpIntegrationReady(ampIntegration) {

  // ampIntegration initializes player with `myVideojsInitializer(myVideo)`
  ampIntegration.listenTo('videojs', myVideo, myVideojsInitializer);

Custom integrations


These are the communication methods available:

  • method to control playback.
  • postEvent to inform the host document about playback events.
  • getIntersection to get video's viewability on the host document.
  • getMetadata to get information about the host document.


method(name, callback)


ampIntegration.method('play', function () {;

These are methods that should be implemented:

  • play
  • pause
  • mute
  • unmute
  • showcontrols
  • hidecontrols
  • fullscreenenter
  • fullscreenexit



  • mute and unmute are required for autoplay.




Posts a playback event to the frame. For example:

myVideoElement.addEventListener('pause', function () {

The valid events are as follows.

Event Description
pause Triggered when your video has been paused.
muted Triggered when your video has been muted.
unmuted Triggered when your video has been unmuted.

postAnalyticsEvent(eventType[, vars])




The iframe document can request user consent data when the host document uses amp-consent.

If you only require to block the iframe from loading when consent is not given, it's preferable to set the data-block-on-consent attribute instead of calling getConsentData()

The callback passed to the function will be executed with an object containing the following properties:

  "consentMetadata": {
    "consentStringType": 2,
    "additionalConsent": "additional-consent-string",
    "gdprApplies": true,
    "purposeOne": true
  "consentString": "accept-string",
  "consentPolicyState": 1,
  "consentPolicySharedData": {
    "tfua": true,
    "coppa": true

For example, a video could be blocked from loading until consentPolicyState is available:

// Create and listen to video once consent is given on the parent page:
integration.getConsentData(function(consent) {
  if (
    consent.consentPolicyState !== /* SUFFICIENT */ 1 &&
    consent.consentPolicyState !== /* UNKNOWN_NOT_REQUIRED */ 3
  ) {

  // You can use other consent values to map video consent logic as well.

  // Initialize video and integration once consent is available.
  var video = document.createElement(video); = "width: 100vw; height: 100vh";
  video.src = document.body.getAttribute('data-videoid');

  integration.method('play', function() {;

  // etc...

A complete example using getConsentData is available as well.



// Will log intersection every 2 seconds
setInterval(function () {
  integration.getIntersection(function (intersection) {
    console.log('Intersection ratio:', intersection.intersectionRatio);
}, 2000);





Returns an object containing metadata about the host document:

  "canonicalUrl": "",
  "sourceUrl": "",
  "title": "My host document's title",
  "lang": "en"
  • canonicalUrl is the canonical URL.

  • sourceUrl is the AMPHTML URL.

  • title is the source URL's document title at the time the <amp-video-iframe> is initialized. null when the component is loaded in a shadow root.

  • lang is the source URL's language specified in <html ⚡️ lang="en">. null when the component is loaded in a shadow root.

  • jsonLd includes the parsed content of a JSON-LD tag, if present.

Bạn cần được trợ giúp thêm?

Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.

Truy cập Stack Overflow
Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Truy cập GitHub