youtube-video-element
v1.1.6
Published
Custom element (web component) for the YouTube player.
Downloads
2,350
Readme
<youtube-video>
A custom element
for the YouTube player with an API that matches the
<video>
API.
- 🏄♂️ Compatible
HTMLMediaElement
API - 🕺 Seamlessly integrates with Media Chrome
Example
<script type="module" src="https://cdn.jsdelivr.net/npm/youtube-video-element@1"></script>
<youtube-video controls src="https://www.youtube.com/watch?v=rubNgGj3pYo"></youtube-video>
Installing
<youtube-video>
is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
Loading into your HTML using <script>
Note the type="module"
, that's important.
Modules are always loaded asynchronously by the browser, so it's ok to load them in the head :thumbsup:, and best for registering web components quickly.
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/youtube-video-element@1"></script>
</head>
Adding to your app via npm
npm install youtube-video-element --save
Or yarn
yarn add youtube-video-element
Include in your app javascript (e.g. src/App.js)
import 'youtube-video-element';
This will register the custom elements with the browser so they can be used as HTML.
Related
- Media Chrome Your media player's dancing suit. 🕺
<mux-video>
A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.<mux-player>
The official Mux-flavored video player web component.<vimeo-video>
A web component for the Vimeo player.<videojs-video>
A web component for Video.js.<wistia-video>
A web component for the Wistia player.<jwplayer-video>
A web component for the JW player.<hls-video>
A web component for playing HTTP Live Streaming (HLS) videos.castable-video
Cast your video element to the big screen with ease!