CoverVid: Create HTML5 Video for Background
CoverVid is a great little tool that allows your HTML5 video behave like a background cover image.
This tool is different because it is lightweight — coming in at only 800 bytes — and is usable in native Javascript and jQuery. Its logic is parent based, meaning the parent element can be any size (not necessarily just a full-screen background).
Here’s how it works:
- Pull the project down from GitHub and link
covervid.min.jsinto your site. Make sure it is loaded after jQuery. - It is important to note that the video you target will use its parent element to scale. With that in mind, there’s some simple markup and base styling to size the video’s parent/wrapper element.
- Call the plugin and you are ready to go.
What’s especially nice about CoverVid is that this tool allows you to create a trendy video-based homepage with ease. You can add this tool to your existing site and get a trendy design refresh in no time. The hardest part will be finding the perfect video to represent your website or brand page.
