vidbg.js
/**
* @file vidbg is a 0.3kb micro-library for embedding video backgrounds into web pages.
* Scaffolded with generator-microjs v0.0.12
* @author Daniel Lamb <dlamb.open.source@gmail.com>
*/
function vidbg(element, sources, overlay) {
var container, item, html = [], index = sources.length;
// check if the device supports HTML5 video
if (!document.createElement('video').canPlayType) {
// not supported
return;
}
// start video tag
html.push('<video autoplay="true" loop="loop" muted="muted" volume="0">');
// order matters in some browsers
sources.reverse();
// build video tag source(s) html
while (index--) {
item = sources[index];
html.push('<source src="', item.src, '" type="video/', item.type, '" />');
}
// end video tag
html.push('</video>');
// check for optional overlay element
if (overlay) {
// append optional overlay element
html.push('<div class="vidbg-overlay"></div>');
}
// create video DOM element
container = document.createElement('div');
container.setAttribute('class', 'vidbg');
// set the container HTML
container.innerHTML = html.join('');
// append container to the provided element
element.appendChild(container);
}