Floating Content Player on AMP

Aniview content player can be implemented using amp-video-iframe component in order to support floating player.

The amp-video-iframe operates as a floating ad on mobile size screens.

To embed the player, you will need to call the amp-video-iframe script.and the amp-video-docking script:

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

Implementation

1. Please create a template and a tag using the studio on the platform.

2. Implement the following code - replace ?AV_TAGID=[enter your tag ID]&AV_PUBLISHERID=[enter your publisher id]

    <amp-video-iframe
    layout="responsive"
    width="16"
    height="9"
    dock="#avdock"
    style="overflow: visible !important;"
    src="https://player.avplayer-amp.com/script/amp/videoplayer/ampplayer.html?AV_TAGID=6299c09439c19e237c55be9e&AV_PUBLISHERID=6124992a9c738f3419721fb3" >
  </amp-video-iframe>

Alternative floating location

By default the aforementioned code will start the floating at the top right position. If you wish to change the floating style, use the following code as example:

<div style="left: 1px; position: fixed; top: 1px;">
<amp-layout
  width="150"
  height="125"
  id="avdock">
</amp-layout>
</div>

You can find an example of the implementation here - https://play.aniview.com/6124992a9c738f3419721fb3/6299c24d8ef8777c8f400405/amp-iframe.html

Please note that the video will start floating only on content, so we recommend making sure that the player will start with content and then will present ads. In addition, please note there must be more content than ads in the overall media setup.

Please CC support@aniview.com on questions regarding the setup.