Overview

Google AMP is a website publishing technology that lets you create web pages that load almost instantly on mobile phones, increasing SEO rankings, user experience, and viewership of your content. Playwire’s AMP Video Player allows for your Google AMP optimized site to easily show your video content and display AMP Compliant Video Ads. In this article, we’ll show you how. If you’d like learn more about using Google AMP on your site, please click https://developers.google.com/amp/ – if you are a WordPress Site, you can easily AMP your site at https://wordpress.org/plugins/accelerated-mobile-pages/

Note: If you do not see the Google AMP Tab in step 3, please make sure that you ask your Account Manager to enable this feature.

View Live Demo Here https://support.playwire.com/demos/amp/

1

Upload Video Content To Your Account

In order for Playwire AMP Player to work properly, your Phoenix Account must host your Content Video Files that you intend on displaying in your AMP Pages.
  • Login to your Playwire Account
  • Select “upload video” from your dashboard page
  • Fill in the appropriate fields, and press “upload”, now you have videos ready for deployment
 
2

Go To Your Video

Now, we’ll go to the specific video you’d like to embed as a Playwire AMP Video
  • Click “Videos” from the left navigation
  • In the submenu that opens up, click “Manage Videos”
  • Lastly, click on the video you want to embed and you will land on the Video Details page
 
3

Copy Embed Code

An embed code is a single line of text you will be able to copy and paste into the HTML of your website, which will then render your video wherever you place the embed code.
  • Locate the section titled Google AMP under the Video Details Section and make sure it’s pressed/highlighted
  • If you have multiple websites, please make sure that you have selected the proper website from the dropdown located to the right of the “body” embed snippet
  • Click the copy button to the right of the text for the head embed
  • The embed code is now copied to your clipboard
  • After this code was pasted in head of your site (see step 4), repeat this step for the body embed, amp-iframe element
4

Embed Your Video:

Open up your favorite text editor or IDE and open the file you would like to place your emded code.
  • Paste the embed code you copied in the prior step where you would like the video to appear.
  • Please be aware of where you are placing each HTML snippet (2 snippets, head for head, body for body)
Important Embed code will NOT work without a web server or local server environment such as MAMP or XAMPP<!DOCTYPE> must be declared at the top of your HTML document or you may encounter errors in Internet Explorer
Basic HTML Code Example

<!DOCTYPE html>

<html>

<head>
	<title>Playwire AMP Video Player Basic Video Embed Example</title>
<!-- REQUIRED in <head> !!! -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script><style amp-boilerplate>  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><style amp-custom>  #pw-amp-video {    min-width: 300px;    min-height: 169px;  }</style><!-- REQUIRED in <head> !!! -->
</head>

<body>

<!-- Sample Article Header -->


<h5>Example Web Page Article</h5>

<!-- PLAYWIRE AMP VIDEO PLAYER EXAMPLE VIDEO EMBED CODE STARTS HERE --> 
<amp-iframe allowfullscreen="allowfullscreen" frameborder="0" height="169" layout="responsive" sandbox="allow-scripts allow-same-origin" src="https://cdn.intergi.com/amp/amp-bridge.html?&config=https://m6s9f6i3.ssl.hwcdn.net/1/videos/v2/5469893/zeus.json&page_url=https://diez.hn" width="300"><amp-img height="169" layout="fill" placeholder="" src="https://intergi-phoenix-dev.s3.amazonaws.com/1/videos/5469893/optimized_poster_0000.jpg" width="300">
</amp-img>
</amp-iframe> 
<h6>Posted by: Johnny User | 13 Comments | Posted: May 24, 2015</h6>

<!-- Sample Article Content -->

This town deserves a better class of criminal and I'm gonna give it to them. Tell your men they work for me now. This is my city. The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them. I will go back to Gotham and I will fight
men like this but I will not become an executioner.


</body>

</html>

  • Was this Support Article Helpful ?
  • yes   no