Use lite-youtube web component to speed up homepage load

src/_11ty/shortcodes.ts

@@ -10,17 +10,11 @@ export function registerShortcodes(eleventyConfig: UserConfig): void {
 }
 
 function _setupMedia(eleventyConfig: UserConfig): void {
-  eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, skipAlternativeLink = false, fullWidth = false) {
-    let embedMarkup = `<iframe ${fullWidth ? 'class="full-width"' : 'width="560" height="315"'} 
-        src="https://www.youtube.com/embed/${id}" title="${title}" frameborder="0" 
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-        allowfullscreen loading="lazy"></iframe><br>`;
-
-    if (!skipAlternativeLink) {
-      embedMarkup += `<p><a href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener" title="Open '${title}' video in new tab">${title}</a></p>`;
-    }
-
-    return embedMarkup;
+  eleventyConfig.addShortcode('ytEmbed', function (id: string, title: string, fullWidth = false) {
+    return `
+<lite-youtube videoid="${id}" videotitle="${title}" ${fullWidth ? 'class="full-width"' : ''}>
+  <p><a class="lite-youtube-fallback" href="https://www.youtube.com/watch/${id}" target="_blank" rel="noopener">Watch on YouTube in a new tab: "${title}"</a></p>
+</lite-youtube>`;
   });
 
   eleventyConfig.addPairedShortcode('videoWrapper', function (content: string, intro = '') {

src/_layouts/base.html

@@ -113,5 +113,6 @@
     {% endfor -%}
     {% endif -%}
 
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/[email protected]/lite-youtube.js" integrity="sha256-86ffB4sPsE/4qX2arBqtw6F1Ofv8lvv7AomIyHHTB5s=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   </body>
 </html>

src/_sass/base/_base.scss

@@ -443,6 +443,15 @@ td ol, td ul, td dl, td p {
     padding: 0 0.75rem;
     text-wrap: pretty;
   }
+
+  lite-youtube {
+    border-radius: 0.25rem;
+    border: 2px solid $site-color-card-border;
+  }
+}
+
+lite-youtube:not(.full-width) {
+  max-width: 560px;
 }
 
 .footnote-ref a {

src/_sass/base/_variables.scss

@@ -25,6 +25,7 @@ $site-color-body-caption: color.scale($site-color-body, $lightness: 30%);
 $site-color-footer: #303c42;
 $site-color-primary: $flutter-color-blue-500;
 $site-color-panel-background: color.scale($site-color-primary, $lightness: 95%);
+$site-color-card-border: rgba(0, 0, 0, .125);
 $sidenav-divider-color: #e7e8ed;
 
 // Fonts

src/_sass/components/_card.scss

@@ -8,6 +8,9 @@
   margin-block-end: 1rem;
   justify-content: center;
 
+  // Disable lite-youtube shadow for videos in cards.
+  --lite-youtube-frame-shadow-visible: false;
+
   &.wide {
     --card-min-width: 19rem;
   }
@@ -47,6 +50,7 @@
 
     &.wrapped-card {
       padding: 0;
+      border-width: 2px;
     }
 
     .card-leading {

src/content/data-and-backend/state-mgmt/options.md

@@ -191,7 +191,7 @@ doesn't need a `BuildContext`.
 :::note
 To learn more, watch this short Package of the Week video on the GetIt package:
 
-{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week', true %}
+{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week' %}
 :::
 
 [Flutter state management for minimalists]: {{site.medium}}/flutter-community/flutter-state-management-for-minimalists-4c71a2f2f0c1?sk=6f9cedfb550ca9cc7f88317e2e7055a0

src/content/get-started/flutter-for/swiftui-devs.md

@@ -49,7 +49,7 @@ you can open and run some of the examples on DartPad.
 As an introduction, watch the following video.
 It outlines how Flutter works on iOS and how to use Flutter to build iOS apps.
 
-{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %}
+{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %}
 
 Flutter and SwiftUI code describes how the UI looks and works.
 Developers call this type of code a _declarative framework_.

src/content/get-started/flutter-for/uikit-devs.md

@@ -46,7 +46,7 @@ Jump around and find questions that address your most relevant needs.
 As an introduction, watch the following video.
 It outlines how Flutter works on iOS and how to use Flutter to build iOS apps.
 
-{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', false, true %}
+{% ytEmbed 'ceMsPBbcEGg', 'Flutter for iOS developers', true %}
 
 ### Views vs. Widgets
 

src/content/index.md

@@ -78,14 +78,14 @@ Learn more about `Stateless` and `Stateful`
 widgets in [What is State?][]
 
 <div class="card-grid">
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true, true %}
+      {% ytEmbed 'xWV71C2kp38', 'Create your first Flutter app', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'QlwiL_yLh6E', 'What is state?', true, true %}
+      {% ytEmbed 'QlwiL_yLh6E', 'What is state?', true %}
     </div>
   </div>
 </div>
@@ -94,7 +94,7 @@ widgets in [What is State?][]
 [What is State?]: {{site.yt.watch}}?v=QlwiL_yLh6E
 
 {% videoWrapper 'Only have 60 seconds? Learn how to build and deploy a Flutter App!' %}
-{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!', true %}
+{% ytEmbed 'ZnufaryH43s', 'How to build and deploy a Flutter app in 60 seconds!' %}
 {% endvideoWrapper %}
 
 ## Want to skill up?
@@ -105,14 +105,14 @@ using helper methods][standalone-widgets] or
 [what is "BuildContext" and how is it used][buildcontext]?
 
 <div class="card-grid">
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true, true %}
+      {% ytEmbed 'IOyq-eTRhvo', 'Widgets vs helper methods | Decoding Flutter', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true, true %}
+      {% ytEmbed 'rIaaH87z1-g', 'BuildContext?! | Decoding Flutter', true %}
     </div>
   </div>
 </div>

src/content/testing/common-errors.md

@@ -500,7 +500,7 @@ For more information and to learn how to fix,
 check out the following video on
 [`PrimaryScrollController`][controller-video]:
 
-{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter', true %}
+{% ytEmbed '33_0ABjFJUU', 'PrimaryScrollController | Decoding Flutter' %}
 
 [controller-video]: {{site.api}}/flutter/widgets/PrimaryScrollController-class.html
 

src/content/ui/animations/index.md

@@ -40,7 +40,7 @@ For a deeper understanding of just how animations work in Flutter, watch
 [Animation deep dive][].
 (Also published as a [_companion article_][article6].)
 
-{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation', true %}
+{% ytEmbed 'PbcILiN8rbo', 'Take a deep dive into Flutter animation' %}
 
 ## Implicit and explicit animations
 
@@ -71,7 +71,7 @@ For more information, watch
 built-in explicit animations][].
 (Also published as a [_companion article_][article4].)
 
-{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations', true %}
+{% ytEmbed 'CunyH6unILQ', 'Making your first directional animations with built-in explicit animations' %}
 
 ### Explicit animations
 
@@ -80,7 +80,7 @@ If you need to build an explicit animation from scratch, watch
 AnimatedBuilder and AnimatedWidget][].
 (Also published as a [_companion article_][article5].)
 
-{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget', true %}
+{% ytEmbed 'fneC7t4R_B0', 'Creating custom explicit animations with AnimatedBuilder and AnimatedWidget' %}
 
 ## Animation types
 

src/content/ui/animations/staggered-animations.md

@@ -56,7 +56,7 @@ staggered_pic_selection.
 The following video demonstrates the animation performed by
 basic_staggered_animation:
 
-{% ytEmbed '0fFvnZemmh8', 'Staggered animation example', true %}
+{% ytEmbed '0fFvnZemmh8', 'Staggered animation example' %}
 
 In the video, you see the following animation of a single widget,
 which begins as a bordered blue square with slightly rounded corners.

src/content/ui/layout/index.md

@@ -1298,9 +1298,9 @@ The following videos, part of the
 [Flutter in Focus][] series,
 explain `Stateless` and `Stateful` widgets.
 
-{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets', true %}
+{% ytEmbed 'wE7khGHVkYY', 'How to create stateless widgets' %}
 
-{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used', true %}
+{% ytEmbed 'AqCMFXEmf3w', 'How and when stateful widgets are best used' %}
 
 [Flutter in Focus playlist]({{site.yt.playlist}}PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2)
 
@@ -1310,7 +1310,7 @@ Each episode of the
 [Widget of the Week series]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
 focuses on a widget. Several of them includes layout widgets.
 
-{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week', true %}
+{% ytEmbed 'b_sQ9bMltGU', 'Introducing widget of the week' %}
 
 [Flutter Widget of the Week playlist]({{site.yt.playlist}}PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
 

src/content/ui/layout/scrolling/slivers.md

@@ -29,21 +29,21 @@ in Flutter, see the following resources:
   video that gives an overview of the
   `SliverAppBar` widget.
 
-  {% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week', true %}
+  {% ytEmbed 'R9C5KMJKluE', 'SliverAppBar | Flutter widget of the week' %}
 
 **[SliverList and SliverGrid][]**
 : A one-minute Widget-of-the-week
   video that gives an overview of the `SliverList`
   and `SliverGrid` widgets.
 
-  {% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week', true %}
+  {% ytEmbed 'ORiTTaVY6mM', 'SliverList & SliverGrid | Flutter widget of the week' %}
 
 **[Slivers explained - Making dynamic layouts][]**
 : A 50-minute episode of [The Boring Show][]
   where Ian Hickson, Flutter's Tech Lead, and Filip Hracek
   discuss the power of slivers.
 
-  {% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts', true %}
+  {% ytEmbed 'Mz3kHQxBjGg', 'Slivers explained - Making dynamic layouts' %}
 
 ## API docs
 

src/content/ui/widgets/index.md

@@ -62,34 +62,34 @@ like input, layout, and text.
 help you quickly get started with Flutter widgets.
 
 <div class="card-grid wide">
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true, true %}
+      {% ytEmbed '1z6YP7YmvwA', 'TextStyle - Flutter widget of the week', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true, true %}
+      {% ytEmbed 'VdkRy3yZiPo', 'flutter_rating_bar - Flutter package of the week', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true, true %}
+      {% ytEmbed 'gYNTcgZVcWw', 'LinearGradient - Flutter widget of the week', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true, true %}
+      {% ytEmbed '-Nny8kzW380', 'AutoComplete - Flutter widget of the week', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true, true %}
+      {% ytEmbed 'y9xchtVTtqQ', 'NavigationRail - Flutter widget of the week', true %}
     </div>
   </div>
-  <div class="card wrapped-card">
+  <div class="card wrapped-card outlined-card">
     <div class="card-content">
-      {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true, true %}
+      {% ytEmbed 'qjA0JFiPMnQ', 'mason - Flutter package of the week', true %}
     </div>
   </div>
 </div>