A repository of over 1000 quality jQuery plugins

jQuery Covervid

Covervid is a jQuery Audio & Video plugin.

Created by Stefanerickson

Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension

Not what you're looking for? Click here to view more Audio & Video jQuery plugins

CoverVid

At the core of CoverVid, is the idea of this little CSS snippet being possible...

.selector {
    background-video: url('../foo/bar.mp4 || ../foo/bar.webm');
    background-size: cover;
    background-position: center center;
}

Why is it special?

CoverVid is very lightweight, with only 800 bytes of Javascripts. It 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).

How do I use it?

  1. First pull the project down from GitHub, or install with bower running bower install covervid and link covervid.min.js into your site. Make sure it is loaded after jQuery if using it.

  2. It is important to note that the video you target will use its' parent element to scale. With that in mind, we will create some simple markup and add some base styling to size the videos' parent/wrapper element.

    <div class="covervid-wrapper">
        <video class="covervid-video" autoplay loop poster="img/video-fallback.png">
            <source src="videos/video.webm" type="video/webm">
            <source src="videos/video.mp4" type="video/mp4">
        </video>
    </div>
    .covervid-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
  3. Now, we would simply call coverVid(Container-Element, Video-Width, Video-Height) on the video element, passing through the native dimensions of the video. If you are using jQuery, we would call $('.covervid-video').coverVid(1920, 1080);.


You might also like these other Audio & Video jQuery Plugins

  • articulate.js

    A jQuery plugin that lets the browser speak to you.

  • JqVideoBox

    jqVideoBox is jquery lightbox for videos from Youtube, Metacafe, Google Video, Dailymotion, Blip, Revver, Veoh, Vimeo and more

  • jQuery Videosub

    jQuery plugin for enabling HTML5 video with SRT Subtitles

 Views
 Downloads

Download Github Page
License:

The MIT License (MIT)