Embedding the WS.WebTV video player into an AMP HTML page

Tutorials, technical documents and downloads

AMP HTML

Rev. Mar. 9, 2016

Description:

Instructions for embedding the WS.WebTV video player into an AMP HTML page

What is AMP HTML?

AMP stands for Accelerated Mobile Page. It is a project from Google designed to make fast-viewing mobile pages; it is basically a stripped down form of HTML.
For more information about AMP, visit https://github.com/ampproject/amphtml.

We are not explaining here how to create AMP pages, we are only focusing on how to embed the WS.WebTV video player. If you want to learn how to create AMP pages, visit
https://github.com/ampproject/amphtml/blob/master/docs/create_page.md

Embedding the WS.WebTV video player / Example Implementation

Since AMP HTML pages uses a special set of HTML tags, you can't use the standard embed code to include the video player into an AMP page; instead, you need to the special <amp-iframe> tag as we show in the example below.

Example URL: https://webtvsolutions.s3.amazonaws.com/amp-demo-en.html

Implementation notes
1 - Your WebTV must use HTTPS
2 - Your AMP page must have the "custom-element" "amp-iframe" defined in the header:

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

3 - The source (src) if the amp-iframe must be https://webtv-url/embed.php?id=clip_id&w=1&h=1
4 - The placeholder image corresponds to the Clip poster URL (you can get it from the Content Administrator, by editing the Clip).

Sample code for embedding the video player using a fixed size of 400x225:

    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-en/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-en/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>

Sample embed code for embedding the video player with a variable size (resizable/responsive):

    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-en/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-en/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>

Putting it all together...

<!doctype html>
  <html amp lang="en">
    <head>
      <meta charset="utf-8">
      <title>WS.WebTV video player in AMP page demo</title>
      <link rel="canonical" href="https://webtvsolutions.s3.amazonaws.com/amp-demo-en.html">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    </head>
    <body>

    <h1>WS.WebTV video player in AMP page demo</h1>
    
    <h3>Fixed size</h3>
    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-en/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-en/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>
    
    <h3>Resizable</h3>
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-en/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-en/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>

    </body>
  </html>

Embedding the WS.WebTV video player into an AMP HTML page | WS.WebTV Documentation | WebTV Solutions

Professional and affordable online video solutions

Installation and Maintenance

Configuration

Solving Login Problems

Statistics

Content Administration

‹Ext› Adv. Users Manag.

‹Ext› Store

Advanced Customization

Others

AMP HTML