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

beautiful, free tech videos for your homepage

7 new videos every monday
Loading Coverr...

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

Tech Coverrs


Top

iPhone X overview

iPhone X showing off

Mirroring iPhone

iPhone X part two

Mobile-Games

Writing-Working

I Just Wanted

Workaholic

Muji Doodle

Save As

Sharper

Sketch

Slow Typer

Office Perks

Black Keys

Iphonography

Pencil down

Discussing features

Morning Routine

Very Open Space

Office Day

Browsing

Spacious

Love Coding

Working Man

Busy People

Paperwork

Inbox Zero

Team Work

Erase and Rewind

Noted

Analog Typing

BW Scroll

Email Scroll

Hey World

Love iOS

Procrastination

White Keyboard

'Merica

Screens

Working House

abcd

PC Typing

Plug and Play

Scroll It

Wall Sketching

Ma Vibes

White Board

Aloha Mundo

Undo

Type

Coder

Meeting Room

Push the Buttons

Airtaxi

Home Work

Working It

A Working Man

Mock Up

Girls Code

Productive Morning

We Work We Wait

Android Scroll

iPhone Scroll

Working Space

Typing Numbers

Mickey

For_Wes

Agile

Hello World

Highrise

Typing...

Office Hours

Lamp

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