AMP pages now have proper Youtube tags

fboes · Oct 17, 2016 · 1b619dd · 1b619dd
1 parent e88c0ff
commit 1b619dd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/models/post.js b/src/models/post.js
@@ -232,10 +232,14 @@ var Post = function (filename, markdown, meta) {
    * @return {String}      [description]
    */
   external.ampifyHtml = function(html) {
+    // <amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>
+    // <amp-iframe width="640" height="360" src="https://www.youtube.com/embed/WfQfYe7-V1A?enablejsapi=1"></amp-iframe>
     return html
       .replace(/(<\/?)(img|video|audio|iframe)/g, '$1amp-$2')
-      .replace(/(<amp-(?:video|iframe))/g, '$1 width="640" height="360"')
+      .replace(/(<amp-img[^>]+)\/>/g,'$1></amp-img>')
+      .replace(/(<amp-(?:video|iframe))/g, '$1 width="640" height="360" layout="responsive"')
       .replace(/(<amp-(?:video|iframe)[^>]+) allowfullscreen=".+?"/g, '$1')
+      .replace(/<amp-iframe([^>]*) src="https:\/\/www.youtube.com\/embed\/(.+?)\?enablejsapi=1"([^>]*)>(.*?)<\/amp-iframe>/g,'<amp-youtube$1 data-videoid="$2"$3></amp-youtube>')
       .replace(/(<amp-(?:audio))/g, '$1 width="640" height="60"')
       .replace(/(<amp-(?:video|audio|iframe).+?>).+(<\/amp-(?:video|iframe))/g, '$1$2')
     ;

diff --git a/themes/default/templates/amp-post.html b/themes/default/templates/amp-post.html
@@ -9,6 +9,7 @@
   <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>
   <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
   <style amp-custom>
     body { font: 80% Tahoma, sans-serif; padding:0; }
     a { color:maroon; }