Special Thanks

A special thanks and shoutout to Stefan Erickson for creating the original CoverVid.

NgCoverVid

At the core of NgCoverVid, 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?

NgCoverVid is very lightweight, with only 1279 bytes of Javascript. 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 it through Bower and link ngCovervid.min.js into your site.

   bower install ng-covervid
   

2. Add ngCovervid as a dependency of your Angular application.

   angular.module('app',['ngCovervid']);

3. 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. The directive must be declared as either an attribute of a video element or as an element itself.

   ATTRIBUTE

   <div class="covervid-wrapper">
       <video covervid class="covervid-video" autoplay loop poster="img/video-fallback.png">
           <source src="videos/clouds.webm" type="video/webm">
           <source src="videos/clouds.mp4" type="video/mp4">
       </video>
   </div>

   ELEMENT

   <div class="covervid-wrapper">
       <covervid class="covervid-video" autoplay loop poster="img/video-fallback.png">
           <source src="videos/clouds.webm" type="video/webm">
           <source src="videos/clouds.mp4" type="video/mp4">
       </covervid>
   </div>

   STYLES

   .covervid-wrapper {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

4. You have the option to include the native height and width of the video as attributes of the element or let the directive determine them for you. Note that including these values as attributes will ensure there is no lag in the initial sizing of the video as the directive needs to wait for the video's metadata to load before it can resize the video.

   <covervid class="covervid-video" autoplay loop poster="img/video-fallback.png"
       height="720" width="1280">