Use lite-youtube web component to speed up homepage load (flutter#11806)

This significantly improves the loading time of the pages with YouTube
embeds, such as the docs homepage and the widget catalog index.

Author: parlough

Diff for: 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 = '') {

Diff for: 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>

Diff for: 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 {

Diff for: 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

Diff for: 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 {

Diff for: 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

Diff for: 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_.

Diff for: 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
 

Diff for: 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>

Diff for: 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
 

Diff for: 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
 

Diff for: 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.

Diff for: 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)
 

Diff for: 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
 

Diff for: 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>