Initial commit

Author: insin

LICENSE

@@ -0,0 +1,18 @@
+Copyright (c) 2023, Jonny Buchanan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,32 @@
+# Astro Lazy YouTube Embed
+
+Embed YouTube videos with a static placeholder which only embeds when you click.
+
+This component uses [an `<iframe>` with `srcdoc` attribute to provide a static placeholder](https://css-tricks.com/lazy-load-embedded-youtube-videos/), which mimics the style of a real YouTube embed (at the time of writing).
+
+## Install
+
+```sh
+npm i astro-lazy-youtube-embed
+```
+
+## Example
+
+This component uses a `default` export, so you can import it as whichever name you prefer:
+
+```astro
+---
+import YouTubeVideo from 'astro-lazy-youtube-embed'
+---
+<YouTubeVideo videoCode="FfTT7mxGw8I" title="Just Curious - Limmy's Homemade Show"/>
+
+<div class="my-8">Provide your own class for additional styling:</div>
+
+<YouTubeVideo
+  class="rounded"
+  videoCode="L0C5nyOVTzc"
+  title="Limmy Teaches Techno - Limmy's Homemade Show"
+/>
+```
+
+![Rendered version of the above example code](/example.jpg)

YouTubeVideo.astro

@@ -0,0 +1,22 @@
+---
+export interface Props {
+	class?: string
+	title: string
+	videoCode: string
+}
+
+let {class: className, title, videoCode} = Astro.props
+let playButtonSvg = `<svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>`
+let gradientStyle = `.gradient{width:100%;height:49px;padding-bottom:50px;position:absolute;top:0;background-repeat:repeat-x;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);pointer-events:none;}`
+let srcdoc = `<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.button{position:absolute;left:50%;top:50%;width:68px;height:48px;margin-left:-34px;margin-top:-24px;}.top{position:absolute;top:18px;left:18px;right:18px;display:flex;flex-wrap:nowrap}.title{color:#fff;font-size:18px;white-space:nowrap;word-wrap:normal;text-shadow:0 0 2px rgba(0,0,0,.5);font-family:"YouTube Noto",Roboto,Arial,Helvetica,sans-serif;line-height:1.3;text-overflow:ellipsis;overflow:hidden;}${gradientStyle}</style><a href="https://www.youtube.com/embed/${videoCode}?autoplay=1"><img src="https://img.youtube.com/vi/${videoCode}/sddefault.jpg" alt="${title}"><div class="gradient"></div><div class="top"><div class="title">${title}</div></div><div class="button">${playButtonSvg}</div></a>`
+---
+<iframe
+  class={className}
+	style="width: 100%; aspect-ratio: 16/9;"
+	src={`https://www.youtube.com/embed/${videoCode}`}
+	title={title}
+	srcdoc={srcdoc}
+	frameborder="0"
+	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+	allowfullscreen
+></iframe>

example.jpg

@@ -0,0 +1 @@
+export {default} from './YouTubeVideo.astro'

index.js

@@ -0,0 +1,30 @@
+{
+  "name": "astro-lazy-youtube-embed",
+  "version": "0.0.1",
+  "description": "Embed YouTube videos with a static placeholder which only embeds when you click",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jonny Buchanan <[email protected]>",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "LICENSE",
+    "YouTubeVideo.astro"
+  ],
+  "keywords": [
+    "astro",
+    "astro-component",
+    "lazy",
+    "youtube",
+    "embed"
+  ],
+  "peerDependencies": {
+    "astro": "^1.0.0 || ^2.0.0-beta"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/insin/astro-lazy-youtube-embed.git"
+  }
+}