Fullscreen Html5 Video Background With Pure JavaScript – bgVideo.js

Category: Javascript | January 13, 2015
0 Comment
Demo Download
Author:
Views Total:1,592 views
Official Page:Go to website
Last Update:January 13, 2015
License:MIT

Preview:

Fullscreen Html5 Video Background With Pure JavaScript – bgVideo.js

Description:

bgVideo.js is a tiny JavaScript library that adds a fullscreen video background to your body or a specific container by using Html5 video element.

How to use it:

Place the bgVideo.js anywhere on your web page.

<script src="dist/bgvideo.min.js"></script>

Add the data-fullvideo attribute containing your background video source to the body tag.

<body data-fullvideo="path/to/demo.mp4">

Advanced usage:

// use like this, nothing else needed
bgVideo({
    sources: ['bg.mp4', 'bg.webm', 'bg.ogg'],
    img: 'bg.jpg'
});
// calling with no arguments returns the <video> tag
// so you can do things like
bgVideo().pause();
bgVideo().play();

See Also:

You Might Be Interested In:

Leave a Reply