Barebones implementation of youtube clips on AMP pages

tips & tricks
1

Add the following inside your amp templates <head> tag:

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

Step 2

Create two files in your shortcodes folder:

  1. youtube.html
  2. youtube.amp.html

Step 3

In youtube.html, add the following standard Hugo output html for Youtube clips:

<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe src="//www.youtube.com/embed/{{ .Get "src" }}?autoplay=0"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouTube Clip"></iframe>

In youtube.amp.html, add

<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="{{ .Get "src" }}">
</amp-youtube>

Step 4

Insert clips using {{< youtube src=“CLIP-ID” >}}

Could probably be made even simpler, but it validates in Googles AMP test tool.

2 Likes