replace demo video with a chill vibe (#188)

paulirish · Oct 14, 2024 · 9db7796 · 9db7796
1 parent 73ab670
commit 9db7796
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
   <body>
     <h1><code>lite-youtube</code> custom element</h1>
 
-    <lite-youtube videoid="ogfYd705cRs"></lite-youtube>
+    <lite-youtube videoid="goiWrNiaT0I"></lite-youtube>
 
     <script src="./src/lite-yt-embed.js"></script>
 

diff --git a/readme.md b/readme.md
@@ -31,7 +31,7 @@ To use the custom element you will need to:
 <script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>
 
 <!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
-<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 ```
 
 <br>
@@ -44,9 +44,9 @@ to be more privacy friendly for end users.
 Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.
 
 ```html
-<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
-  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
-    <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
+<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
+  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
+    <span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
   </a>
 </lite-youtube>
 ```
@@ -57,14 +57,14 @@ Use this as your HTML, load the script asynchronously, and let the JS progressiv
 
 If you want to provide a custom poster image, just set it as the background-image, and lite-yt will not overwrite it:
 ```html
-<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');"></lite-youtube>
 ```
 
 Use [poster-image-availability.html](https://paulirish.github.io/lite-youtube-embed/testpage/poster-image-availability.html) to determine what poster images are available for you.
 
 ## Access the YouTube Iframe Player API
 
-Use the `js-api` param: `<lite-youtube videoid="ogfYd705cRs" js-api>`.. Then you can use [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference):
+Use the `js-api` param: `<lite-youtube videoid="goiWrNiaT0I" js-api>`.. Then you can use [IFrame Player API](https://developers.google.com/youtube/iframe_api_reference):
 
 ```js
 const player = await document.querySelector('lite-youtube').getYTPlayer();
@@ -77,7 +77,7 @@ player.seekTo(15); // jump to 15 seconds
 
 If you want to display a title prior to loading the full embed, set the `title` attribute:
 ```html
-<lite-youtube videoid="ogfYd705cRs" title="Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" title="Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 ```
 
 [Demo: visible title](https://paulirish.github.io/lite-youtube-embed/variants/title.html)
@@ -90,7 +90,7 @@ These may be applied by using the `params` attribute.
 ```html
 <!-- Example to show a video player without controls, starting at 10s in, ending at 20s,
      with modest branding *and* enabling the JS API -->
-<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
 ```
 
 Note that lite-youtube uses `autoplay=1` by default.

diff --git a/testpage/poster-image-summary.html b/testpage/poster-image-summary.html
@@ -113,10 +113,12 @@
     "ajGX7odA87k",
     "-hKK4_gvOS0",
     "5BueilOHIws",
+    "VZhHHSoXwKM",
     "saaTXQ7E3Lw",
     "bJcTWr8-mFo",
     "jWur1VrxNUg",
     "b52cfb6lweU",
     "svEuG_ekNT0",
+    "goiWrNiaT0I",
   ]
 </script>
diff --git a/variants/custom-poster-image.html b/variants/custom-poster-image.html
@@ -10,7 +10,7 @@
 <h1>custom poster image</h1>
 <p>This poster image (aka thumbnail) is 1280px instead of the default (hqdefault), which is 480px.</p>
 
-<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/maxresdefault.jpg');"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/maxresdefault.jpg');"></lite-youtube>
 
 <script src="../src/lite-yt-embed.js"></script>
 

diff --git a/variants/js-api.html b/variants/js-api.html
@@ -9,7 +9,7 @@
 <body>
 <h1><code>lite-youtube</code> with JavaScript API</h1>
 
-<lite-youtube videoid="ogfYd705cRs" js-api playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" js-api playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 
 <script>
 async function seekTo(id, seconds) {
@@ -20,9 +20,9 @@ <h1><code>lite-youtube</code> with JavaScript API</h1>
 }
 </script>
 
-<button type="button" onclick="seekTo('ogfYd705cRs', 5)">Skip to 00:05</button>
-<button type="button" onclick="seekTo('ogfYd705cRs', 10)">Skip to 00:10</button>
-<button type="button" onclick="seekTo('ogfYd705cRs', 60)">Skip to 01:00</button>
+<button type="button" onclick="seekTo('goiWrNiaT0I', 5)">Skip to 00:05</button>
+<button type="button" onclick="seekTo('goiWrNiaT0I', 10)">Skip to 00:10</button>
+<button type="button" onclick="seekTo('goiWrNiaT0I', 60)">Skip to 01:00</button>
 
 <script src="../src/lite-yt-embed.js"></script>
 

diff --git a/variants/multiple-embeds.html b/variants/multiple-embeds.html
@@ -9,7 +9,7 @@
 <body>
 <h1>multiple embeds</h1>
 
-<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 
 
 <lite-youtube videoid="n57U2_-3NLQ" playlabel="Play: Chrome Dev Summit 2021 recap"></lite-youtube>

diff --git a/variants/params.html b/variants/params.html
@@ -21,7 +21,7 @@ <h1><code>lite-youtube</code> custom element</h1>
     The following embed has the params <tt>controls=0</tt> which turns off the UI controls.
 </p>
 
-<lite-youtube videoid="ogfYd705cRs" params="controls=0"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" params="controls=0"></lite-youtube>
 
 <script src="../src/lite-yt-embed.js"></script>
 

diff --git a/variants/pe.html b/variants/pe.html
@@ -11,9 +11,9 @@ <h1>Progressively Enhanced</h1>
 <p>After 2 seconds, the JS is executed and custom element defined.</p>
 <p id="done">...</p>
 
-<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
-  <a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
-    <span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
+<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
+  <a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
+    <span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
   </a>
 </lite-youtube>
 

diff --git a/variants/solo.html b/variants/solo.html
@@ -9,7 +9,7 @@
 <body>
 <h1><code>lite-youtube</code> custom element</h1>
 
-<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 
 <script src="../src/lite-yt-embed.js"></script>
 

diff --git a/variants/title.html b/variants/title.html
@@ -11,7 +11,7 @@ <h1><code>lite-youtube</code> custom element</h1>
 
 <p>Add the title attribute to display a title prior to clicking the lite element.</p>
 
-<lite-youtube videoid="ogfYd705cRs" title="Play: Keynote (Google I/O '18)"></lite-youtube>
+<lite-youtube videoid="goiWrNiaT0I" title="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
 
 <script src="../src/lite-yt-embed.js"></script>
 

diff --git a/variants/yt.html b/variants/yt.html
@@ -11,7 +11,7 @@ <h1>typical iframe embed</h1>
     <iframe
       width="720"
       height="405"
-      src="https://www.youtube.com/embed/ogfYd705cRs"
+      src="https://www.youtube.com/embed/goiWrNiaT0I"
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen