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

beautiful, free urban videos for your homepage

7 new videos every monday
Loading Coverr...

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

Urban Coverrs


Top

Disco December

Shopping Mode

South Carolina City

U Turn

Dogs Park

Golden Gate Traffic

Pink Mood NYC

Broadwaycrew

Industrial Brooklyn

Main Street

Mega Yacht

Oculus

UN building

Riverside

Ferry Tour

Ultra Sunset

Empire

Long shot

Cinema Paradiso

Suburbia

Thirst

Pipe Fittings For All

Airport Check-In

Workit

walking on stripes

Steptwo

Streetclown

Two Guys Walking

Green Machine

Strole in the Park

Gentle Ripples

Gardening

Taxi Jet

Rainy Street

Street Art

C Town

West Braodway

Italia

Latino Clock

Many Roads

Burrito Time

Nueva York

Tourists

Work-Walk

Yellow Traffic

Chinatown Trio

Flowers Girl

Pigeons gang

Tulips are Here

Geranium

Clouds Lapse

The Rooster

Snow Wires

Concrete Jungle

Bling blink

Circles and people

After Party

Highlights

Orchestra

Shoes Stories

The Alley

Healthy Life

Manhatten Night

New York Sky

Windy Traffic

Fire Snow

Big Apple

Beach Bar

Bulldozer

Underground Traffic

Diagonal

Ground Zero

High Lines

Yellow Cars

Busy City

Bangkok Traffic

Escalators

Scooooters

BnW

Traffic Jungle

Urban Timer

Indoor Market

Fade to Black

Last Call

Park Lapse

Training

Comics

Hold

Home and Away

Rectangle Movements

Shibuya

Shoes

The Crosswalk

Down

Escalate

In And Out

Pride

Traffic Ahead

Urban Bokeh

Urban Jungle

Blurry Lights

Slow Traffic

Authentic Shower

Bird Catcher

Indian Pedestrian

Next Stop

Blurry People

'Merica

Screens

Symmetric Traffic

Working House

Go West

The Tourist

Ups and Downs

Blue Bottle

Rush Hour

Valentines

2 Ways Traffic

Skate

Under

Cycling Santa

Happy Street

Merry Xmas

Slow Dog

Thin Ice

Traffic Tree

Night Out

Big City Life

Going Places

Broadway

Curiosity

Draw Something

Market

Street View

Brooklyn

Falling Leaf

Hanging Out

NYC Blurred Traffic

Sun Flower

A Working Man

Construction

Night Traffic

Escalation

NYC Traffic

The Fountain

50 Percent Off

City Walking

We Work We Wait

Dancing Bulbs

The Hose

Carmela

City Nights

New York Jam

The Temple

Weekend

Right Way

Mr. President

Dolores

The Boulevard

Highrise

Blurred Traffic

Serene Lake

Windy Tree

Hypnotize

Flea Market

Market People

Pedestrian

Urban Blossom

Yoyo

Fish

Office Hours

Lamp

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