I have recently worked on a new project to keep track of stock portfolios targeted at personal investors and had to create a nice little landing page. So naturally I had to brush up my front end design skills a bit. One way to make the page look quite a bit more dynamic and interactive is to just add a background image to my hero unit, instead of a typical background image.

The solution was actually quite a bit easier than I thought it would be.

Finding the right video

This was actually easier than I thought, as there are plenty of free, creative commons libraries out there. The quality varies quite a bit, but eventually there is something useful.

* http://coverr.co/
* https://videos.pexels.com/

Some HTML and CSS Magic for modern browsers

I basically started out with the HTML Code example provided by http://cover.co/ and modified a bit, to end up with an html only version.

    <div class="video-container">
        <div class="filterx"></div>
        <video autoplay loop muted class="fillWidth  is-hidden-mobile" poster="MyVideo.jpg">
            <source src="MyVideo.mp4" type="video/mp4" />
            <source src="MyVideo.webm" type="video/webm" />
        </video>
        <div class="poster " style="background-image: url('MyVideo.jpg')">
        </div>
    </div>

Some important things to note here about the video tag attributes:

* poster: Image URL which will be displayed until the video is loaded.
* autoplay: Make the video play automatically on load
* loop: loop forever. Make sure your video is long enough so that it does not repeat every second
* muted: This one is important and took me a while wondering why chrome wouldn't play, while other browsers would. Chrome ignores autostart for videos which are not muted.

Encode your videos

To make sure your website still loads fast even with the videos, it is important to correctly encode your videos. I have no idea why websites offering videos specificially meant for use as background video with unoptimized video files. But anyway, just do it yourself. That's the easy part :-) I have written a small shell script to do it for me using just docker!

In addition to just encoding the video to make it smaller, I also apply a blur effect. Previously I did it with CSS which worked quite fine in Google Chrome, but Firefox couldn't handle it and just stuttered. So I figured, just preprocess the video and it works great.

#!/bin/bash

# https://slhck.info/video/2017/03/01/rate-control.html

set -xe

export FFMPEG="docker run -v `pwd`:/tmp/workdir -it --rm jrottenberg/ffmpeg"
export blur="gblur=10"

function jpgblur() {
    input=$1
    output=$2
    docker run -v `pwd`:/imgs dpokidov/imagemagick /imgs/$input -gaussian-blur 30x10 /imgs/$output
}

function tomp4() {
    echo "Converting to mp4"
    input=$1
    output=$2
    $FFMPEG -i $input -c:v libx264 -an -r:v 24 -filter:v scale=-1:720 -vf "$blur" -b:v 1000k -pass 1 -f mp4 -y /dev/null
    $FFMPEG -i $input -c:v libx264 -an -r:v 24 -filter:v scale=-1:720 -vf "$blur" -b:v 1000k -pass 2 -y $output
}

function towebm() {
    echo "Converting to webm/vp9"
    input=$1
    output=$2
    $FFMPEG -i $input -c:v libvpx-vp9 -an -r:v 24 -filter:v scale=-1:720 -vf "$blur" -b:v 1000k -pass 1 -f webm -y /dev/null
    $FFMPEG -i $input -c:v libvpx-vp9 -an -r:v 24 -filter:v scale=-1:720 -vf "$blur" -b:v 1000k -pass 2 -y $output
}

sourcefile=$1
filename=$(basename $sourcefile)
barename="${filename%.*}"
outname="${barename}-out"

if ! test -e "$filename" ; then
    echo "only support encoding files from local directory."
    exit 1
fi

jpgblur $barename.jpg $outname.jpg
tomp4 $sourcefile $outname.mp4
towebm $sourcefile $outname.webm

Simply call it with the source video (and source jpg poster file) and it will

* blur the background image using image magick
* convert to mp4 and webm and apply a nice blur effect.