Autoplay And iframes In Chrome 65+

Last updated on March 7, 2018 - Back to blog home page

Tweet

What are Feature Policies?

Feature Policy is a web platform API which gives a website the ability to allow and deny the use of browser features in its own frame, and in iframes that it embeds. Examples of features that could be controlled by feature policy include: autoplay, fullscreen ...

Additional information on the subject can be found here and here.

With the release of Chrome 65 autoplay of video content in an iframe has been disabled by default. It must be enabled through autoplay feature policy.

Allowing iframes to autoplay video content

This change in autoplay policy for iframes means that an iframe holding an HTML5 video player needs to be explicitly allowed to autoplay by the parent window. This is the same in principle as what we have done in the past for allowing an iframe to go fullscreen. If you are using an iframe within an iframe then each iframe needs to be explicitly allowed to autoplay. Note that autoplay is allowed by default on same-origin iframes so enabling autoplay feature policy is only required for cross-origin iframe. Example:

<iframe
  width="640"
  height="360"
  src="http://www.mydomain.com/embedded-player.html"
  title="Video content"
  style="border:none;"
  allowfullscreen
  sandbox="allow-scripts allow-presentation allow-same-origin"
  allow="autoplay; fullscreen; picture-in-picture; xr-spatial-tracking; clipboard-write"></iframe>

We have tested this set-up when Radiant Media Player is used in an iframe and can confirm this is generally working for Chrome 65+. It is likely other browsers will implement this feature as well in the near future. In case autoplay is blocked due to autoplay feature policy Radiant Media Player shall provide a play button so that playback can be initiated by a user gesture, in such case the autoplayfailure API event shall fire. You should also note the need to use the allowfullscreen attribute in complement to the allow attribute in order to support browsers that do not support allow attribute.

If you are using amp-iframe and autoplay you need to add allow="autoplay" to your amp-iframe element.