wc-youtube

Embedded YouTube 📹 Player Web Component

A Web Component that allows you to embed a YouTube player in your application.

By Stefan Nieuwenhuis

Installation

# via UNPKG
<script type="module" src="https://unpkg.com/wc-youtube@latest/dist/wc-youtube.js"></script>

# via npm 
npm i wc-youtube
 
# or yarn 
yarn add wc-youtube

Usage

<wc-youtube videoId="[enter-a-valid-YT-video-id-here]"></wc-youtube>

Demo

Click here to see the component live.

Attributes

The following attributes are available:

Attribute	Type	Default value	Description	Possible values
autoplay	number	0	Specifies if a video automatically stats playing when the player loads	0, 1
cc_lang_pref	string	en	Specifies the default language for captions (ISO 639-1 format)	Any ISO 639-1 two-letter language code
cc_load_policy	number	null	Specifies if closed captions are shown by default	0, 1
color	string	null	Specifies the color of the video's progress bar	red, white
controls	number	1	Specifies if the video controls are displayed	0, 1
disablekb	number	0	Specifies if the player responds to keyboard controls	0, 1
enablejsapi	number	0	Specifies if the player responds to IFrame of JavaScript api calls	0, 1
end	number	null	Specifies the time, measured in seconds from the start of the video, when the player should stop playing the video	any positive integer
fs	number	1	Specifies if the fullscreen button is displayed	0, 1
height	number	500	Specifies the height of the player	any positive integer
hl	string	en	Specifies the interface language (ISO 639-1 format	Any ISO 639-1 two-letter language code
iv_load_policy	number	1	Specifies if video annotations are shown	1, 2, 3
list	string	null	Specifies the content that will load in the player	searchquery, username or playlistID
listType	string	null	Specifies the content that will load in the player	search, user_uploads, playlist
loop	number	0	Specifies if the (list of) video(s) needs to be looped	0, 1
modestbranding	number	null	Specifies if the YouTube logo is displayed. Disabled when color is set to white.	0, 1
origin	string	window.location.origin	Specifies the domain as the origin parameter value	origin's domain name
playlist	string	[]	Specifies a comma seperated list of videoId's to play. Video's in the list property will play after	any comma seperated list of valid videoId's
playsinline	number	0	Specifies if videos play inline or fullscreen in an HTML5 player on iOS	0, 1
start	string	null	Specifies the time, measured in seconds from the start of the video, when the player should start playing the video	any positive integer
width	number	500	Specifies the width of the player	any positive integer
widget_referrer	string	window.location.href	Specifies the URL where the player is embedded	the url of the page

Usage:

<wc-youtube attribute="value"></wc-youtube>