Skip to content

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

License

Notifications You must be signed in to change notification settings

jimmyko/covervid

This branch is 1 commit ahead of, 6 commits behind scerickson/covervid:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

27f0480 · Aug 18, 2015

History

61 Commits
Jul 31, 2015
Jul 30, 2015
May 29, 2014
Jun 26, 2014
May 2, 2014
Jan 2, 2015
Jan 2, 2015
Aug 18, 2015
Aug 18, 2015
Jul 31, 2015
Jan 2, 2015

Repository files navigation

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);.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 40.4%
  • HTML 34.7%
  • CSS 24.6%
  • ApacheConf 0.3%