TESTING Switch to paulirish/lite-youtube-embed

hugo.yml

@@ -80,6 +80,8 @@ module:
       target:           assets/scss/bootstrap
     - source:           node_modules/bootstrap/dist/js/bootstrap.bundle.min.js
       target:           assets/js/vendor/bootstrap.bundle.min.js
+    - source:           node_modules/lite-youtube-embed/src/lite-yt-embed.css
+      target:           assets/css/lite-yt-embed.css
 
 params:
   docs_version:         "5.3"

package.json

@@ -42,14 +42,14 @@
     "find-unused-sass-variables": "^5.0.0",
     "hugo-bin": "^0.121.1",
     "linkinator": "^6.0.4",
+    "lite-youtube-embed": "^0.3.2",
     "lockfile-lint": "^4.13.2",
     "markdownlint-cli2": "^0.12.1",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "stylelint": "^16.3.1",
     "stylelint-config-twbs-bootstrap": "^14.0.0",
-    "vanilla-lazyload": "^19.0.5",
     "vnu-jar": "23.4.11"
   }
 }

src/assets/js/lite-youtube.js

@@ -0,0 +1 @@
+import 'lite-youtube-embed'

src/assets/scss/_lite-youtube.scss

@@ -0,0 +1,29 @@
+.lite-youtube-fallback {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9; // matches YouTube player
+  padding: 1em;
+  color: #fff;
+  text-decoration: none;
+  background-color: #000;
+}
+
+// right-facing triangle "Play" icon
+.lite-youtube-fallback::before {
+  display: block;
+  content: "";
+  border: solid transparent;
+  border-width: 2em 0 2em 3em;
+  border-left-color: #fb0005;
+}
+
+.lite-youtube-fallback:hover::before {
+  border-left-color: #fff;
+}
+
+.lite-youtube-fallback:focus {
+  outline: 2px solid #fb0005;
+}

src/assets/scss/style.scss

@@ -8,6 +8,7 @@
 @import "navbar";
 @import "pagination";
 @import "syntax";
+@import "lite-youtube";
 @import "theme";
 
 hr {

src/layouts/_default/home.html

@@ -14,7 +14,7 @@ <h1 class="post-title fw-semibold">
         {{ partial "author-info" (dict "context" . "lazyload" $lazyload) -}}
 
         {{ if .Page.Params.video -}}
-          {{- partial "video" (dict "context" . "lazyload" $lazyload) -}}
+          {{- partial "video" (dict "context" .) -}}
         {{- end }}
 
         {{ if .Page.Params.banner -}}

src/layouts/partials/scripts.html

@@ -7,7 +7,7 @@
 {{- $bootstrapJs := resources.Get "js/vendor/bootstrap.bundle.min.js" | fingerprint | resources.Copy "/assets/js/vendor/bootstrap.bundle.min.js" }}
 <script defer src="{{ $bootstrapJs.RelPermalink }}"></script>
 
-{{- $scripts := slice "js/application.js" "js/lazyload.js" -}}
+{{- $scripts := slice "js/application.js" "js/lite-youtube.js" -}}
 {{- range $scriptFile := $scripts -}}
 {{- $script := resources.Get $scriptFile | js.Build $esbuildOptions | fingerprint | resources.Copy (path.Join "/assets" $scriptFile) }}
 <script defer src="{{ $script.RelPermalink }}"></script>

src/layouts/partials/stylesheet.html

@@ -5,5 +5,10 @@
   {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
 {{- end -}}
 
-{{- $style := resources.Get "scss/style.scss" | toCSS $sassOptions | postCSS $postcssOptions | fingerprint }}
-<link href="{{ $style.RelPermalink }}" rel="stylesheet">
+{{- $style := resources.Get "scss/style.scss" | toCSS $sassOptions -}}
+{{- $lye := resources.Get "css/lite-yt-embed.css" -}}
+{{- if hugo.IsProduction -}}
+  {{- $lye = $lye | minify -}}
+{{- end -}}
+{{- $styles := slice $style $lye | resources.Concat "/assets/css/styles.css" | postCSS $postcssOptions | fingerprint }}
+<link href="{{ $styles.RelPermalink }}" rel="stylesheet">

src/layouts/partials/video.html

@@ -1,16 +1,8 @@
-{{- /* Accepts 2 parameters, the "context" and "lazyload" */ -}}
+{{- /* Accepts 2 parameters, the "context" and "video_start" */ -}}
 
-{{- $lazyload := .lazyload -}}
 {{- $video := .context.Params.video -}}
 {{- $videoStart := .context.Params.video_start -}}
 
 <div class="ratio ratio-16x9">
-  <iframe
-    {{ if eq $lazyload true }}class="lazy" data-src{{ else }}src{{ end }}="https://www.youtube-nocookie.com/embed/{{ $video }}?rel=0{{ with $videoStart }}&amp;start={{ . }}{{ end }}"
-    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
-    title="YouTube Video"
-    width="760"
-    height="570">
-  </iframe>
+  <lite-youtube videoid="{{ $video }}" videoStartAt="{{ $videoStart }}" playlabel="Play video" params="rel=0"></lite-youtube>
 </div>