Add support for YouTube embeds

[idleberg]

This PR adds basic support for YouTube embeds, so videos can be played directly. I could think of supporting other video services (e.g. Vimeo, Dailymotion), but I first wanted to see where this is going.

There are some shortcomings I don't want to leave unmentioned:

• this does not support YouTube playlist (Twitter itself only has limited support)
• the video ratio is fixed, but without accessing the YouTube API, there's no way to determine the correct one (16:9 is probably most common)

I also suggest applying aspect-ratio on the iFrame and maybe change the width/height in your CSS.

[nhoizey]

I think it would be better for performance to use Paul Irish's lite-youtube-embed component: https://github.com/paulirish/lite-youtube-embed

[idleberg]

I think it would be better for performance to use Paul Irish's lite-youtube-embed component

Unfortunately, I have no deeper experience with Eleventy and how to configure it to support custom elements. Simply requiring lite-youtube-embed results in this error:

HTMLElement is not defined (via ReferenceError)

[aarongustafson]

@idleberg Can you drop the version you tried with the custom element embed? I set it up in my own Eleventy site and could probably help get it over the finishline.

[idleberg]

@aarongustafson These are my uncommitted changes:

diff --git a/package.json b/package.json
index fc114ae..dafa521 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "twitter-lite": "^1.1.0"
   },
   "dependencies": {
-    "chartist": "^0.11.4"
+    "chartist": "^0.11.4",
+    "lite-youtube-embed": "^0.2.0"
   }
 }
diff --git a/src/twitter.js b/src/twitter.js
index 7ad5a6c..2875beb 100644
--- a/src/twitter.js
+++ b/src/twitter.js
@@ -159,7 +159,8 @@ class Twitter {
                                                searchParams.delete('v');
                                        }
 
-                                       let displayUrlHtml = `<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/${id}${searchParams.keys().length ? '?' + searchParams.toString() : ''}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen crossorigin="anonymous" />`
+                                       await import('lite-youtube-embed');
+                                       let displayUrlHtml = `<lite-youtube videoid="${id}" />`
                                        text = text.replace(url.url, displayUrlHtml);
                                } else {
                                        let {targetUrl, className, displayUrl} = this.getUrlObject(url);