Redoing how the frontpage header videos load

Redoing how the frontpage header videos load

In short: custom pre-load image is shown while the video loads, and
the only video loaded is the one appropriate for the window size on
load

Previously, both Desktop and Mobile videos would load for this site,
and only one would be shown, resulting in slowed load times.

The first method tried was switching out the source based on the
window width; this required a single video container as opposed to
two, and it worked fine, with the exception of the container not
technically having any 'content' on load, leading to disruptively
jumping content without a fallback or poster image in place.

Since we do not have a fallback image, I created a simple one that
says the video is loading.

After discussing this problem with Anthony, we decided to go with
a method that still uses two different containers, but uses
preload="none" to avoid the video loading, and then .load() to load
the actual video if the window size is right. The only problem
remaining was that now both elements would show without a class
like show-for-medium-down, but with those classes, when someone
resizes from large to small no video is shown at all.

However, since the possibility of problems is relatively small
(only when going from tablet portrait to landscape, and from
opening the site in a small window and resizing it to be large),
this too is something we will at this point not be spending time
to resolve.

Some attempt was made at creating some code that handles source
loading based on window resize, but this has been abandoned on
account of window resizing not being our concern (and to save time)