CoverVid - HTML5 video behave like a background cover image

CoverVid is a jquery plugin that make your HTML5 video behave like a background cover image with a simple jQuery extension. Very simple to use.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS FILES

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="covervid.min.js"></script>

2. HTML

<div class="covervid-wrapper">
    <video 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>

3. CSS

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

4. JAVASCRIPT

$('.covervid-video').coverVid(1920, 1080);

we simply call the coverVid() function on the video element, passing through the native dimensions of the video.