@luwes/youtube-video-element

<youtube-video>

A custom element (web component) for YouTube.

The element API matches the HTML5 <video> tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag.

One of the goals was to have <youtube-video> seamlessly integrate with Media Chrome.

Example (CodeSandbox)

<script type="module" src="https://unpkg.com/@luwes/youtube-video-element@0"></script>
<youtube-video controls src="https://www.youtube.com/watch?v=H3KSKS3TTbc"></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>

<script type="module" src="https://unpkg.com/@luwes/youtube-video-element@0"></script>

Adding to your app via npm

npm install @luwes/youtube-video-element --save

Include in your app javascript (e.g. src/App.js)

import '@luwes/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.
• <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!
• <mux-player> The official Mux-flavored video player web component.