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:
- AMP Docking Only
- 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"
>
</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"
>
</amp-video-iframe>
<div style="left: 1px; position: fixed; bottom: 1px;">
<amp-layout
width="213"
height="120"
id="primis-dock-slot">
</amp-layout>
</div>
Updated over 2 years ago