A web component that displays render YouTube embeds faster. The shadowDom web component version of Paul's lite-youtube-embed.
- No dependencies; it's just a vanilla web component.
- It's fast yo.
- It's Shadow Dom encapsulated!
- It's responsive 16:9
- It's accessible via keyboard and will set ARIA via the
videotitle
attribute - It's locale ready; you can set the
videoplay
to have a properly locale based label - Set the
start
attribute to start at a particular place in a video - You can set
autoload
to use Intersection Observer to load the iframe when scrolled into view. - Loads placeholder image as WebP with a Jpeg fallback
This web component is built with ES modules in mind and is available on NPM:
Install code-block:
npm i @justinribeiro/lite-youtube
# or
yarn add @justinribeiro/lite-youtube
After install, import into your project:
import '@justinribeiro/lite-youtube';
If you want the paste-and-go version, you can simply load it via CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js">
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
<lite-youtube
videoid="guJLfqTFfIw"
videotitle="This is a video title"
></lite-youtube>
<lite-youtube
videoid="guJLfqTFfIw"
videoplay="Mirar"
videotitle="Mis hijos se burlan de mi español"
>
</lite-youtube>
Height and Width are responsive in the component.
<style>
.styleIt {
width: 400px;
margin: auto;
}
</style>
<div class="styleIt">
<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
</div>
<!-- Start at 5 seconds -->
<lite-youtube videoid="guJLfqTFfIw" videoStartAt="5"></lite-youtube>
Uses Intersection Observer if available to automatically load the YouTube iframe when scrolled into view.
<lite-youtube videoid="guJLfqTFfIw" autoload> </lite-youtube>
Use any YouTube Embedded Players and Player Parameters you like
<lite-youtube videoid="guJLfqTFfIw" params="controls=0&enablejsapi=1">
</lite-youtube>
The web component allows certain attributes to be give a little additional flexibility.
Name | Description | Default |
---|---|---|
videoid |
The YouTube videoid | `` |
videotitle |
The title of the video | Video |
videoplay |
The title of the play button (for translation) | Play |
videoStartAt |
Set the point at which the video should start, in seconds | 0 |
autoload |
Use Intersection Observer to load iframe when scrolled into view | false |
params |
Set YouTube query parameters | `` |