HTML5 Web Component for Embedding YouTube Videos

Continuing the experiments with HTML5 Web Components I started a few weeks ago, I am happy to present my latest endeavor – HTML5 Web Component, which can be used to embed YouTube videos as a custom tags:

[sourcecode language=”xml”]
<acidjs-youtube videoid="wvHsX2lSW64"></acidjs-youtube>
[/sourcecode]

The component utilizes YouTube’s embedding API, and all of the parameters are supported as HTML attributes. Only videoid is required, the rest in the list are optional:

• videoid – ID of the video (required), as in the url: https://www.youtube.com/watch?v=wvHsX2lSW64
• width – Player width (optional). Default: 640
• height – Player height (optional). Default: 390
• theme – Player theme (optional) “dark” or “light”. Default: “dark”
• showinfo – Display author and uploader info (optional) – 0 or 1. Default: 1
• loop – Continuously play the video (optional) – 0 or 1. Default: 0
• end – The time, measured in seconds from the start of the video, when the player should stop playing the video (optional). Default: 0
• autoplay – Video auto play (optional) – 0 or 1. Default: 0
• autohide – Indicates whether the video controls will automatically hide after a video begins playing (optional) 0 or 1 or 2. Default: 2
• rel – Show related videos when playback of the initial video ends (optional) – 0 or 1. Default: 0.
• enablejsapi – Make the JavaScript API available (optional) – 0 or 1. Default: 1

Here’s a link to the demo and to the code in case you want to play with it. If you are interested in the relatively new technology of HTML5 Web Components you may want to check my other posts related to this topic.

Enjoy and thanks for stopping by!