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

beautiful, free artsy videos for your homepage

7 new videos every monday
Loading Coverr...

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

Artsy Coverrs


Top

Bath Time

Doggy Watch

Green Cabin

Nap Timer

Open Arrow

Fire<->Ice

Snowy Bench

Disco December

Fency Snow

Festive Tree

Holiday lights

Holiday Sale

Open Gate

Snow Bricks

Tree Close-Up

Magazine

Onfire

Play

Stay

TwisterTime

Pink Mood NYC

Cloud Surf

New England

Oculus

Trio

Fancy Fence

Disco

Evening breeze

Writing-Working

Clouds Fly By

Gentle Ripples

Cloudy Road

Street Art

Flower Ceiling

Cranesbills

Clouds Lapse

10K Feet

Boats Maze

Snow Wires

Bling blink

Iphonography

Pencil down

Shoelaces

Matcha

Rain On Me

Fresh Paint

Bokeh Tov

Waiting Wishing

BnW

Handyman

Hold

Shoes

Glass Maker

Round Table

Erase and Rewind

Baggage Claim

A Purple Balloon

Ma Vibes

Sparks

Drink Wine

Chandelier

Jackpot

Blurry Night

Broadway

Draw Something

Merry Go Round

Brooklyn

Billowing

Home Work

Working It

Boarding

Yoga Time

A Director View

I Love You

Melting Pot

Open Fire

Lonely Chair

Dancing Bulbs

Sugar

Carmela

Head or Tails

Slide Show

Ideas

Strum Away

Weekend

Drips

Hosin

Ristretto

All Set

Mr. President

Cloudy Water

Puzzling

Blurred Traffic

Hypnotize

Flea Market

Market People

Pedestrian

Rusty Beach

Yoyo

Lamp

Grass is Green

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