Embedding Player V4 in Accelerated Mobile Pages (AMP)

You can optimize playback performance on mobile devices by embedding Ooyala Player V4 on a web page using Accelerated Mobile Pages (AMP), an open-source JavaScript framework for mobile web browsers. AMP renders web pages faster by managing how resources are loaded and providing other performance-enhancing features, such as:

  • Download most important resources first, and fetch lazy-loaded resources ahead of time
  • Optimize font downloads and use of styles
  • Pre-calculate layout of all page elements before loading external resources, avoiding time-consuming page layout calculations at load time
  • Pause media when it is not in focus
  • Keep external libraries to a minimum

For more information, see How AMP Works and Create your AMP HTML page in the AMP documentation.

Supported Player Capabilities

The following Player V4 capabilities are supported in this release:
  • Configure the embedCode, pcode, playerID, and skin.json file
  • Playback experience targeted for mobile devices
  • Requires the main_html5 video plugin

Unsupported Player Capabilities

The following Player V4 capabilities are currently not supported:
  • Page-level parameters
  • Ads plugins
  • Other video plugins (only main_html5 is supported)
  • Discovery
  • Playlist
  • Ooyala Player Token
  • Autoplay

Supported Layouts

AMP provides the layout attribute, a common attribute that can be used in any element on an AMP HTML page. This optional attribute expands the capabilities of CSS so you can more easily create a responsive page design. The AMP Ooyala Player supports the following layout types:
  • fill
  • fixed
  • flex-item
  • responsive

For more information, see Layout & media queries in the AMP documentation.

Integration Steps

To add Ooyala Player V4 to an AMP-optimized HTML page, use a special AMP HTML tag to load the AMP version of Ooyala Player that is hosted on the Google CDN.

  1. Create an AMP HTML page, as described at https://www.ampproject.org/docs/get_started/create.
  2. In the <head> section, insert the following line to add support for the amp-iframe itself:
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    Full details of how to set up an amp-iframe can be found in the following links: Below, we’ll discuss which setup options need to be considered when embedding the Ooyala player inside an amp-iframe. The following sample page shows a typical AMP iframe setup with the Ooyala Web Player:
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <title>Ooyala AMP Iframe Sample</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <div style="margin: 10vh auto; width: 360px">
      <amp-iframe
        title="Ooyala Video Player"
        width="360"
        height="203"
        sandbox="allow-scripts allow-same-origin allow-popups"
        layout="responsive"
        frameborder="0"
        allowfullscreen
        allow="encrypted-media"
        src="https://player.ooyala.com/static/v4/production/latest/skin-plugin/iframe.html?ec=I3dXhnazoidu1V58G8iOorCCdDZwqlaZ&pbid=dcb79e2098c94889a1b9f2af6280b45d&pcode=Z5Mm06XeZlcDlfU_1R9v_L2KwYG6">
        <!-- Optional placeholder that removes constraint that Iframes must be either 600px
        away from the top or not within the first 75% of the viewport when scrolled to the top  -->
        <amp-img
          layout="fill"
          src="https://secure-cf-c.ooyala.com/I3dXhnazoidu1V58G8iOorCCdDZwqlaZ/PE3O6Z9ojHeNSk7H4yMDoxOjBzMTtyGk"
          placeholder>
        </amp-img>
      </amp-iframe>
    </div>
  </body>
</html>

Setting up the amp-iframe element

To set up the player, first you must add an amp-iframe tag and configure its attributes. The table below shows the purpose of all of the attributes shown in the sample page:
Attribute Decription
src The URL of an HTML page that contains the Ooyala player embed. This can be either the Ooyala-hosted template, or a custom, self-hosted page. The url must use https and a different origin than the one where the AMP page is being hosted.
title Name or title of the content to be displayed
width Initial width of the iframe, in pixels
height Initial height of the iframe, in pixels
sandbox AMP iframes are “maximum sandboxed” by default, which means that the parent page must explicitly grant them certain permissions in order to enable features like running JavaScript, etc. The Ooyala player requires the following values in order to function properly: allow-scripts allow-same-origin allow-popupsPlease see here for details.
layout Type of layout to use for the iframe container. For details and possible values, please see here.
frameborder (Optional) Set this to 0 to remove the border around the iframe container
allowfullscreen Required in order to allow videos to enter fullscreen mode
allow Set to encrypted-media in order to allow DRM content on Chrome, otherwise can be omitted

Restrictions

The AMP Project reference lists the following restrictions that apply to amp-iframe components:
  • An amp-iframe may not appear close to the top of the document (except for iframes that use a placeholder, as described below). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.
  • By default, an amp-iframe is sandboxed (see details of sandbox attribute above).
  • An amp-iframe must only request resources via HTTPS, from a data-URI, or via the srcdoc attribute.
  • An amp-iframe must not be in the same origin as the container unless they do not allow allow-same-origin in the sandbox attribute.

Using a Placeholder

The restriction that an amp-iframe may not appear close to the top of the document can be bypassed by setting a placeholder image for the component. A placeholder can be set by including an amp-img tag inside the amp-iframe element and setting an image URL, such as:

<amp-iframe title="AMP with Placeholder">
  <amp-img
    layout="fill"
    src="https://secure-cf-c.ooyala.com/I3dXhnazoidu1V58G8iOorCCdDZwqlaZ/PE3O6Z9ojHeNSk7H4yMDoxOjBzMTtyGk"
    placeholder>
  </amp-img>
</amp-iframe>

DRM

Although the Ooyala player doesn’t currently support DRM playback on mobile devices, an AMP page loaded on a desktop browser might run into issues if attempting to play DRM content on Chrome. This is because Encrypted Media Extension permissions have been deprecated in Cross-origin iframes when using Chrome.

This restriction can be bypassed by setting the allow attribute on the amp-iframe to a value of encrypted-media. Please see here for details.

Responsiveness

AMP iframes support automatic resizing, however, this feature requires that a certain code be added to the iframe template. Our current Ooyala iframe template doesn’t currently have this code, and also has some issues with responsiveness in general. Although playlists should work properly inside AMP iframes, the current CSS in our player causes the thumbnails to be rendered outside of view when inside an iframe.

Known Issues and Limitations

Any limitations that apply to regular iframes will also be present when using amp-iframes. In addition to the limitations described here, it’s worth mentioning that Flash-related features such as the Bitmovin Flash fallback for Windows 7, OSMF Flash plugin, etc., will not be available when using AMP iframes.

Was this article helpful?