├── .editorconfig
├── .github
└── workflows
│ └── lhci.yml
├── LICENSE
├── index.html
├── package-lock.json
├── package.json
├── readme.md
├── src
├── lite-yt-embed.css
└── lite-yt-embed.js
├── testpage
├── poster-image-availability.html
└── poster-image-summary.html
├── variants
├── custom-poster-image.html
├── js-api.html
├── multiple-embeds.html
├── params.html
├── pe.html
├── solo.html
├── title.html
└── yt.html
├── vercel.json
└── youtube-thumbnail-urls.md
/.editorconfig:
--------------------------------------------------------------------------------
1 | # https://editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | end_of_line = lf
8 | trim_trailing_whitespace = true
9 |
10 | # prettier custom things
11 | quote_type = single
12 | max_line_length = 160
13 |
14 | [src/]
15 | indent_size = 4
16 | indent_style = space
17 | insert_final_newline = true
18 |
--------------------------------------------------------------------------------
/.github/workflows/lhci.yml:
--------------------------------------------------------------------------------
1 | name: Build project and Run Lighthouse CI
2 | on: [push]
3 | jobs:
4 | lhci:
5 | name: Lighthouse CI
6 | runs-on: ubuntu-latest
7 | steps:
8 | - uses: actions/checkout@v4
9 | - uses: actions/setup-node@v3
10 | with:
11 | node-version: 16
12 | - name: npm install, build
13 | run: |
14 | npm install
15 | - name: run Lighthouse CI
16 | run: |
17 | npm install -g @lhci/cli@0.12.x
18 | lhci autorun --collect.staticDistDir=./variants --upload.target=temporary-public-storage
19 | env:
20 | LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2019 Paul Irish
2 |
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | lite-youtube-embed
5 |
6 |
7 |
8 |
9 |
10 | lite-youtube custom element
11 |
12 |
13 |
14 |
15 |
16 | View isolated demos:
17 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lite-youtube-embed",
3 | "version": "0.3.3",
4 | "lockfileVersion": 2,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "lite-youtube-embed",
9 | "version": "0.3.3",
10 | "license": "Apache-2.0"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lite-youtube-embed",
3 | "version": "0.3.3",
4 | "description": "A faster youtube embed.",
5 | "license": "Apache-2.0",
6 | "main": "src/lite-yt-embed.js",
7 | "style": "src/lite-yt-embed.css",
8 | "repository": {
9 | "type": "git",
10 | "url": "git+https://github.com/paulirish/lite-youtube-embed.git"
11 | },
12 | "keywords": [
13 | "youtube",
14 | "custom element",
15 | "web component"
16 | ],
17 | "author": "Paul Irish",
18 | "bugs": {
19 | "url": "https://github.com/paulirish/lite-youtube-embed/issues"
20 | },
21 | "homepage": "https://github.com/paulirish/lite-youtube-embed#readme",
22 | "readme": "readme.md",
23 | "files": [
24 | "src/**",
25 | "package.json",
26 | "package-lock.json",
27 | "readme.md"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Lite YouTube Embed [](https://npmjs.org/package/lite-youtube-embed)
2 |
3 | > #### Renders faster than a sneeze.
4 |
5 | Provide videos with a supercharged focus on visual performance.
6 | This custom element renders just like the real thing but approximately 224× faster.
7 |
8 | Demo: https://paulirish.github.io/lite-youtube-embed/
9 |
10 | ## Comparison
11 |
12 | | Normal `
19 |
20 |
21 |
22 |