Special Hunters Promo: 2 video sequences, edited just for you!

beautiful, free animals videos for your homepage

7 new videos every monday
Loading Coverr...

Coverr was made with by the CodersClan and Veed.Me teams

Animals Coverrs


Top

Doggy Watch

Dogs Park

Wildog

Tired is Happy

Dog-And-Fog

Rest and Play

Pesach

Fish Tank

Roots to Treetop

Play Date

Squirrel and Co

Pigeons gang

Crocodile

The Rooster

Dog and Flowers

Seagulls

Border Collies

Flying Birds

Coffee Place

Walk the Dog

Drinking Dog

Horns

The King

Dog Lovers

Here Boy

Make a Wish

Puppiness

Duckies

Gold

Border Collie

Bird Catcher

Beach and Birds

Bug Life

Fish Pond

Pigeon Impossible

Walking Away

Duck Duck Go

Go Goat

Goat With The Wind

One Swan

Three Swans

Rolling Horse

Puppy

Free Cows

Holy Cow

Its Clark

For Ems

Went Fetch

Shrimps on the Barbie

Bird Trails

Fish

Lulu

How to use

1. Download your favorite video.

2. Upload the video to your website.

3. Add the following snippets to your site

Be sure to change the 3 source paths marked in blue

<div class="homepage-hero-module">
    <div class="video-container">
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden">
            <img src="PATH_TO_JPEG" alt="">
        </div>
    </div>
</div>
.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}
//jQuery is required to run this code
$( document ).ready(function() {

    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

function scaleVideoContainer() {

    var height = $(window).height() + 5;
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
    windowHeight = $(window).height() + 5,
    videoWidth,
    videoHeight;

    // console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width');

        $(this).width(windowWidth);

        if(windowWidth < 1000){
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

            $(this).width(videoWidth).height(videoHeight);
        }

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');

    });
}

Need a custom video or to edit shots?

Check out Veed.Me

Need a coder for your site?

Check out CodersClan

Get emails when new Coverrs are up


Top