Embed videos with AMP

What is AMP?

AMP (Accelerated Mobile Pages) is an open-source project which provides a robust framework for creating a lightweight experience of a webpage that loads lightning fast on mobile connections.

In order to build these pages the framework provides a large library of components. This library includes a dedicated Dailymotion AMP component which is available for anyone to use Dailymotion videos on their AMP site.

Implementation

Required Script

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

Our Component

<amp-dailymotion>

Example embed

<amp-dailymotion
    data-videoid="x2m8jpp"
    layout="responsive"
    autoplay="true"
    data-mute="true"
    width="480"
    height="270"
    data-param-ads_params="12345"
    data-param-syndication="12345">
</amp-dailymotion>

In order to autoplay correctly on AMP pages, it is required that both autoplay and mute are configured. Add both the autoplay & data-mute="true" to configure this. Our tap to unmute feature won’t be visible, however, this framework provides its own version.

For player parameters that don’t have matching AMP attributes, it’s possible to add in any player parameter using the data-params-{Player_Param}.

TCF API with AMP

Please note that our player is compliant with the TCF API within the AMP framework also. The amp-consent component needs to be added and configured to facilitate the ability to collect and store a user’s consent. This can easily be managed by adding the configuration below.

Furthermore, we recommend blocking the amp-dailymotion component until the user accepts consent. This can easily be achieved by adding data-block-on-consent into the player amp embed. For more info on the consent component see here.

<amp-consent>
  <script type="application/json">
    {
      "exposesTcfApi": true
    }
  </script>
</amp-consent>

<amp-dailymotion data-videoid="x84f3e2"  data-block-on-consent></amp-dailymotion>