What is AMP HTML?

7th March 2016

AMP stands for Accelerated Mobile Pages. It is an open source initiative to optimise pages to speed up rendering on mobile devices.

Speed matters: a page that loads faster reduces the bounce rate and increases engagement. Since Google takes into account the time a page takes to load when deciding on a page’s rank, using AMP HTML could potentially help with SEO too. WordPress has already announced support for AMP and other content management systems are likely to.

An accelerated mobile page will open in any modern browser. Due to the approach it takes to load resources, the optimised page should load almost instantly. In addition, Google will cache the AMP content to speed up loading even further.

There are two parts: AMP HTML and AMP JS.

AMP HTML

This contains a subset of HTML, along with some additional, AMP-specific tags (which are prefixed with amp-). Some HTML tags like and are used just like in a normal HTML page. However since AMP HTML is designed to render pages quickly, it includes its own content tags such as amp-img and amp-video.

AMP JS

This is a library that adds support for the custom tags mentioned above and also ensures that any resources used by the page load quickly and efficiently. One of the most important factors is loading resources asynchronously, so they can load independently. Resources are only loaded when needed, loading as late as possible however being pre-fetched as soon as possible.

Does Vidbeo support AMP HTML?

It does. You can embed your hosted videos on your AMP HTML pages. To do so, you will use the amp-iframe tag.

Since amp-iframe is a tag unique to AMP, it has some particular requirements that mean you will need to modify our standard embed code (shown within the video CMS, on the video details page) in order for your AMP page to be valid.

The example below should make the difference clear:

Standard embed code:

<iframe id=“vp_iframe_ID” width=“640” height=“360” src=“https://vidbeo.com/e/ID" frameborder=“0” scrolling=“no” allowfullscreen=“”></iframe>

Modified-for-AMP:

<amp-iframe id=vp_iframe_ID width=640 height=360 sandbox=“allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox” layout=“responsive” frameborder=“0” src=“https://vidbeo.com/e/ID"><amp-img layout=“fill” src=“https://vidbeo.com/player/image/ID/poster" placeholder></amp-img></amp-iframe>

As you can see by comparing the two blocks of code above, you need to make the following changes to make the embed code validate using AMP:

1) Changed ‘iframe’ to ‘amp-iframe’.

2) Added an extra ‘sandbox’ and ‘layout’ attribute.

3) Added a placeholder image within the iframe. Note: This is optional however it is required if the embedded video is near the top of your page. The AMP HTML rules state that an iframe “must be at least 600px or 75% of the first viewport away from the top”. If it is not, then it needs to contain a placeholder. That avoids a gap on the page while the content within the iframe (in this case, the video player) loads. In our example we have used a frame from the embedded video as the placeholder. So that image will load immediately and then shortly afterwards the video player will load (and replace it).

We have made a very basic responsive web page that demonstrates embedding a video using AMP HTML. If you view the source code for that page in your browser, you will see how we have modified the basic embed code in order to adapt to AMP’s requirements.

To find out more about our AMP HTML or another aspect of our business video hosting, please use our contact form. Or you can email us at support@vidbeo.com. You can also see the code for the AMP project on GitHub.

Return to the Vidbeo homepage?