Skip to content

Commit 1830aeb

Browse files
paulirishpaulirish
committed
replace demo video with a chill vibe
1 parent 023a7eb commit 1830aeb

11 files changed

+24
-22
lines changed

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<h1><code>lite-youtube</code> custom element</h1>
1111

12-
<lite-youtube videoid="ogfYd705cRs"></lite-youtube>
12+
<lite-youtube videoid="goiWrNiaT0I"></lite-youtube>
1313

1414
<script src="./src/lite-yt-embed.js"></script>
1515

‎readme.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ To use the custom element you will need to:
3131
<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>
3232

3333
<!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
34-
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
34+
<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
3535
```
3636

3737
<br>
@@ -44,9 +44,9 @@ to be more privacy friendly for end users.
4444
Use this as your HTML, load the script asynchronously, and let the JS progressively enhance it.
4545

4646
```html
47-
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
48-
<a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
49-
<span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
47+
<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
48+
<a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
49+
<span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
5050
</a>
5151
</lite-youtube>
5252
```
@@ -57,14 +57,14 @@ Use this as your HTML, load the script asynchronously, and let the JS progressiv
5757

5858
If you want to provide a custom poster image, just set it as the background-image, and lite-yt will not overwrite it:
5959
```html
60-
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');"></lite-youtube>
60+
<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');"></lite-youtube>
6161
```
6262

6363
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.
6464

6565
## Access the YouTube Iframe Player API
6666

67-
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):
67+
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):
6868

6969
```js
7070
const player = await document.querySelector('lite-youtube').getYTPlayer();
@@ -77,7 +77,7 @@ player.seekTo(15); // jump to 15 seconds
7777

7878
If you want to display a title prior to loading the full embed, set the `title` attribute:
7979
```html
80-
<lite-youtube videoid="ogfYd705cRs" title="Keynote (Google I/O '18)"></lite-youtube>
80+
<lite-youtube videoid="goiWrNiaT0I" title="Crayon Physics Deluxe - Trailer HD"></lite-youtube>
8181
```
8282

8383
[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.
9090
```html
9191
<!-- Example to show a video player without controls, starting at 10s in, ending at 20s,
9292
with modest branding *and* enabling the JS API -->
93-
<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
93+
<lite-youtube videoid="goiWrNiaT0I" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
9494
```
9595

9696
Note that lite-youtube uses `autoplay=1` by default.

‎testpage/poster-image-summary.html

+2
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,12 @@
113113
"ajGX7odA87k",
114114
"-hKK4_gvOS0",
115115
"5BueilOHIws",
116+
"VZhHHSoXwKM",
116117
"saaTXQ7E3Lw",
117118
"bJcTWr8-mFo",
118119
"jWur1VrxNUg",
119120
"b52cfb6lweU",
120121
"svEuG_ekNT0",
122+
"goiWrNiaT0I",
121123
]
122124
</script>

‎variants/custom-poster-image.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<h1>custom poster image</h1>
1111
<p>This poster image (aka thumbnail) is 1280px instead of the default (hqdefault), which is 480px.</p>
1212

13-
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/maxresdefault.jpg');"></lite-youtube>
13+
<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/maxresdefault.jpg');"></lite-youtube>
1414

1515
<script src="../src/lite-yt-embed.js"></script>
1616

‎variants/js-api.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<h1><code>lite-youtube</code> with JavaScript API</h1>
1111

12-
<lite-youtube videoid="ogfYd705cRs" js-api playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
12+
<lite-youtube videoid="goiWrNiaT0I" js-api playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
1313

1414
<script>
1515
async function seekTo(id, seconds) {
@@ -20,9 +20,9 @@ <h1><code>lite-youtube</code> with JavaScript API</h1>
2020
}
2121
</script>
2222

23-
<button type="button" onclick="seekTo('ogfYd705cRs', 5)">Skip to 00:05</button>
24-
<button type="button" onclick="seekTo('ogfYd705cRs', 10)">Skip to 00:10</button>
25-
<button type="button" onclick="seekTo('ogfYd705cRs', 60)">Skip to 01:00</button>
23+
<button type="button" onclick="seekTo('goiWrNiaT0I', 5)">Skip to 00:05</button>
24+
<button type="button" onclick="seekTo('goiWrNiaT0I', 10)">Skip to 00:10</button>
25+
<button type="button" onclick="seekTo('goiWrNiaT0I', 60)">Skip to 01:00</button>
2626

2727
<script src="../src/lite-yt-embed.js"></script>
2828

‎variants/multiple-embeds.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<h1>multiple embeds</h1>
1111

12-
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
12+
<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
1313

1414

1515
<lite-youtube videoid="n57U2_-3NLQ" playlabel="Play: Chrome Dev Summit 2021 recap"></lite-youtube>

‎variants/params.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h1><code>lite-youtube</code> custom element</h1>
2121
The following embed has the params <tt>controls=0</tt> which turns off the UI controls.
2222
</p>
2323

24-
<lite-youtube videoid="ogfYd705cRs" params="controls=0"></lite-youtube>
24+
<lite-youtube videoid="goiWrNiaT0I" params="controls=0"></lite-youtube>
2525

2626
<script src="../src/lite-yt-embed.js"></script>
2727

‎variants/pe.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ <h1>Progressively Enhanced</h1>
1111
<p>After 2 seconds, the JS is executed and custom element defined.</p>
1212
<p id="done">...</p>
1313

14-
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
15-
<a href="https://youtube.com/watch?v=ogfYd705cRs" class="lty-playbtn" title="Play Video">
16-
<span class="lyt-visually-hidden">Play Video: Keynote (Google I/O '18)</span>
14+
<lite-youtube videoid="goiWrNiaT0I" style="background-image: url('https://i.ytimg.com/vi/goiWrNiaT0I/hqdefault.jpg');">
15+
<a href="https://youtube.com/watch?v=goiWrNiaT0I" class="lty-playbtn" title="Play Video">
16+
<span class="lyt-visually-hidden">Play Video: Crayon Physics Deluxe - Trailer HD</span>
1717
</a>
1818
</lite-youtube>
1919

‎variants/solo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<h1><code>lite-youtube</code> custom element</h1>
1111

12-
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
12+
<lite-youtube videoid="goiWrNiaT0I" playlabel="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
1313

1414
<script src="../src/lite-yt-embed.js"></script>
1515

‎variants/title.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1><code>lite-youtube</code> custom element</h1>
1111

1212
<p>Add the title attribute to display a title prior to clicking the lite element.</p>
1313

14-
<lite-youtube videoid="ogfYd705cRs" title="Play: Keynote (Google I/O '18)"></lite-youtube>
14+
<lite-youtube videoid="goiWrNiaT0I" title="Play: Crayon Physics Deluxe - Trailer HD"></lite-youtube>
1515

1616
<script src="../src/lite-yt-embed.js"></script>
1717

‎variants/yt.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1>typical iframe embed</h1>
1111
<iframe
1212
width="720"
1313
height="405"
14-
src="https://www.youtube.com/embed/ogfYd705cRs"
14+
src="https://www.youtube.com/embed/goiWrNiaT0I"
1515
frameborder="0"
1616
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
1717
allowfullscreen

0 commit comments

Comments
 (0)