Youtube Video Web Component

A simple lazy-loading youtube player built with StencilJS

Basic Example

Explicity defined height/width

<youtube-video src="http://youtu.be/C0DPdy98e4c" width="400px" height="300px" />
No css for this example.
See availabe css vars on the component documentation
Auto-size Example

Assumes the container height/width - requires the container to have a defined height/width

<div style="width: 400px; height: 400px"> <youtube-video src="http://youtu.be/C0DPdy98e4c" /> </div>
No css for this example.
See availabe css vars on the component documentation
Custom CSS Example

Alter the display with some custom css variables

<div style="width: 400px; height: 400px"> <youtube-video src="http://youtu.be/C0DPdy98e4c" class="tacky-theme" /> </div> .tacky-theme { --youtube-video-bg-color: yellow; --youtube-video-icon-wrapper-background: rgba(255, 115, 0, 0.8); --youtube-video-icon-color: turquoise; --youtube-video-icon-bg-size: 20%; --youtube-video-icon-size: 30%; }
No Play Button

Hide the play button, show only the video thumbnail

<youtube-video src="http://youtu.be/C0DPdy98e4c" width="400px" height="300px" class="no-button" /> .no-button { --youtube-video-icon-wrapper-background: rgba(0, 0, 0, 0); --youtube-video-icon-color: transparent; --youtube-video-icon-bg-size: 0%; --youtube-video-icon-size: 0%; }