AMP Implementation Guide

Embed Primis Player to a Google Accelerated Mobile Page

AMP is a web component framework that you can use to easily create user-first websites, stories, emails, and ads.
AMP was originally created by Google as a competitor to Facebook Instant Articles and Apple News and is optimized for mobile web browsing and intended to help web pages load faster.

You can embed our player to a Google AMP page by inserting the below scripts into your page.

We have two solutions for AMP framework:

  1. AMP Docking Only
  2. AMP With Floating

AMP Docking Only

In the head of the Google AMP page, add the below script:

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

Insert this to the body section where the docking player should render:

<amp-video-iframe
src="https://live.primis-amp.tech/content/video/amp/videoIframe.php?s=XXXXX"
width="16"
height="9"
layout="responsive"
style=" overflow: visible !important;">
</amp-video-iframe>

AMP With Floating

In the head of the Google AMP page, add the below script:

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

Insert this to the body section where the docking player should render:

<amp-video-iframe
src="https://live.primis-amp.tech/content/video/amp/videoIframe.php?s=XXXXX"
width="16"
height="9"
layout="responsive"
dock="#primis-dock-slot"
style=" overflow: visible !important;">
</amp-video-iframe>

<div style="left: 1px; position: fixed; top: 1px;">
<amp-layout
width="[FLOAT_WIDTH]"
height="[FLOAT_HEIGHT]"
id="primis-dock-slot">
</amp-layout>
</div>

Did this page help you?