Youtube-video-element NPM

`<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.

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!