Monthly Archives: July 2014

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:

<acidjs-youtube videoid="wvHsX2lSW64"></acidjs-youtube>

youtube-video-html5-web-component

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!

New HTML5 Web Component – AcidJs-X-AJAX

Continuing my explorations in the amazing field of HTML5 Web Components, which I started last week, I am happy to present my new endeavor:

x-ajax-html5-web-component

AcidJs-X-AJAX is a lightweight custom tag, capable of making asynchronous server calls with (almost) no coding client-side. Again, it is built on top of Mozilla’s X-Tags library, and looks like that:

<acidjs-xajax
    url="data/person.php"
    action="get"
    params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
    datatype="json"
    id="ajax-panel-01"
    auto="true">
</acidjs-xajax>

Unlike AcidJs.XCheckbox, AcidJsXAjax is not a visual component, but it’s applications are numerous for example – in MV* applications or just pure old AJAX rendering.

Apart from the standard HTML attributes like id, class, data-* etc, here are a few, which are specific to the tag itself:

  • url – the request URL (optional)
  • action – the HTTP method (optional, default is GET)
  • params – query parameters in the form of a JSON object
  • datatype – response type (default is text/plain)
  • id – the ID of the panel
  • auto – if set to “true”, the AJAX call will be executed right after the tag is added to the page.

These properties are also standard getters and setters, so you could do:

document.querySelector("#ajax-panel-01").url;
document.querySelector("#ajax-panel-01").url = "path/to/resource/";

AcidJsXAjax comes also with an easily extensible API and custom events:

  • load()
  • getResponseData()
  • success
  • error

The demo of the component and also it’s code and download link are available on this page.

X-Checkbox – Custom HTML5 Web Component

People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new and exciting world of the HTML5 Web Components. This is my first attempt to create a custom web component – a custom check box, built on top of Mozilla’s X-Tag library. The reason I did not use Google Polymer is just because I started playing with X-Tags, but certainly in the near future I will utilize Polymer.

So here it is – as easy as <acidjs-xcheckbox></acidjs-xcheckbox>, supporting native getters, setters and native properties (checked, disabled, class, etc.) as well as any other custom attributes, form submission without additional check box manipulation, keyboard events plus a couple of additional methods for toggling the enabled and checked states.

Since Shadow DOM is not consistent across browsers yet, the gory guts of the component will reveal a simple check box, wrapped in a label. The look and feel has been achieved with CSS3. Tested on Firefox and Chrome, but supposedly should work on other modern browsers plus IE11.

x-checkbox-custom-web-component

Have nice weekend and greetings from sunny Malta!