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

beautiful, free nature videos for your homepage

7 new videos every monday
Loading Coverr...

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

Nature Coverrs


Top

Cold Stream

Desert Watching

Open Arrow

Tree Close-Up

Chasing Waterfalls

Into the Wild

Summer Place Flyby

Top Highway

Down by the River

Wildog

Desert Storm

New England

Photobooth Bus

Dream House

Vacay Mode

Riverside

Evening breeze

Workout

Tired is Happy

Carmel California

Dog-And-Fog

Porto View

Rest and Play

Clouds Fly By

Snowy Trees

Short Matkot

Winterfell

Amalfi

Honeymoon

Perfect Hour

Roots to Treetop

Two-Swimmers

Flower Ceiling

Play Date

Squirrel and Co

Tulips are Here

Geranium

Cranesbills

Palm Trees

Jungle Road

Boats Maze

For Shore

Crocodile

Keep Running

Heaven

Tulum Pier

CastAway

Apres Ski

Cable Car

Lifting

Snow Land

The Slope

Winter Rest

Dog and Flowers

Rain On Me

Desert Mode

Dodge Tornado

Healthy Life

Park Stroll

The Kayak

Forest Lullaby

Seagulls

Snow Park

Snowball

Windy Traffic

Border Collies

Flying Birds

Love Boat

Stone Falls

Retro Volks

Fishermen Resting

Heaven From Top

Sunset Siesta

Tulum

Everything is Right

Lonely Blue

Over the Bridge

The Coast

Cotton Sky

Day Dream

Shore Aerial Sequence

Slow Fall

Trees Top

Blue Horizon

The Truck

Tropical

Zoom to Shore

Busy Forest

Everest

HorGumpns

Windy Pink

Park Traffic

Walk the Dog

Horns

The King

The Shore

Let it Grow

Water Park

Here Boy

Make a Wish

Pink Swan

Washed

Beach Mode

Cable Skiing

Matkot

Walking By

Puppiness

To The Left

Duckies

Man and Sea

Park Lapse

The Poppy

Free Parking

Gold

High

Onzen

Mystic Beach

No Worries

Orange Ripple

Flower Shower

Think Green

Wave Sitting

Carried Away

Sunset Lapse

Window Snow

Beach and Birds

Up

Yes No

Bug Life

Cruise Control

Depth of Field

River Side

Fish Pond

Green

Red

The Tourist

Acro

Cello Guy

Good Mood

2 Ways Traffic

Puddle

Walking Away

Duck Duck Go

Go Goat

In The Clouds

Merry Xmas

Moving Forward

Slow Dog

Thin Ice

Boat Alone

Infinity

Runner

Horizontal

Backyard

Bull Creek

Country Girl

Goat With The Wind

One Swan

Three Swans

Drums

Earlybird

On The Ganges

Windy

Main Stream

Out Camping

Traffic Tree

Distant Boat

Night Out

The Boat

Diverrs

Yellow Stone

Hitch Hiking

Lake Vibes

Rolling Horse

Agua Natural

Airtaxi

Crossroad

Gaiserr

Relaxation

Curiosity

Falling Leaf

Hanging Out

Karate Kids

Sun Flower

Beach Please

Huppa

Mowing The Lawn

A Working Man

Go Fish

Beach Ball

Puppy

Free Cows

Holy Cow

Home

Sky High

Nature Sunset

Open Fire

Beach Camera

Lonely Chair

Surfers Paradise

The Dock

Flow

Nowhere

The Poyke

Point of View

The Temple

Into The Woods

Its Clark

Sail Away

White Balance

All Set

For Ems

It Was All Yellow

On The Vine

Cloudy Water

Dolores

Winter Grass

Serene Lake

Bird Trails

Yoga

Windy Tree

The Fishermen

Rusty Beach

Urban Blossom

Fish

Lulu

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