Webcomponent wc-youtube following open-wc recommendations
MIT License
A Web Component that allows you to embed a YouTube player in your application.
# 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
<wc-youtube videoId="[enter-a-valid-YT-video-id-here]"></wc-youtube>
Click here to see the component live.
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>