AMP Video via Primis
Overview
Follow this guide to implement an AMP video via Primis.
Before implementing any code, please speak with your Freestar Customer Success Team for more information on our AMP video product.
Required Scripts
The following AMP scripts are required. Place them in the <head> of each AMP page alongside the scripts you already have. You must omit any already present on your page.
<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>
Tagging
The below code snippets are examples. If you haven't retrieved your domain-specific AMP code, please do that first. Instructions are found here.
Place the AMP Video component, <amp-video-iframe>, where you would like the player to render on the page.
Example
<amp-video-iframe
src="https://live.primis-amp.tech/content/video/amp/videoIframe.php?s=123&schain=1.0,1!changed.test,999,1"
width="16"
height="9"
layout="responsive"
dock="#primis-dock-slot"
>
</amp-video-iframe>
<div style="right: 99px; position: fixed; top: 99px">
<amp-layout width="213" height="120" id="primis-dock-slot"> </amp-layout>
</div>
Add the following \<style> tags into your existing AMP styles. Pages will fail AMP validation if they contain more than one <style> tag.
<style amp-custom>
/* your existing styles */
.amp-video-docked-dismiss {
transform: translate(13.5px, 110px);
pointer-events: all;
}
</style>
<style amp-boilerplate>
/* your existing styles */
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>