A breakdown of our video background implementation on our events page which began as an experiment this campaign to provide something more dynamic.

The idea

To make a slow-mo video background promo section showing fundraisers walking, running, swimming and cycling with a rotating SVG animation of corresponding text sitting on top to be in sync with the video. Our inspiration was the absolutely lovely charity: water site.

Tech used

  • CSS keyframe animation to animate an SVG
  • Javascript for syncing the video and the animation
  • HTML5 to add the video element

Limitations

Videos do not auto play on mobile devices by design, so we used a poster image in place of the video. However, after finding a quirky bug in iOS 7 where the video automatically played in the default video player, ignoring the poster attribute and taking over the website we decided to simply remove the HTML5 video element on touch devices and replace it with an image.

Since IE9 and below do not support keyframe animations, nor is there an available polyfil for this functionality (one of the few things modernizr doesn’t do, although, this did make the HTML5 video element cross-browser compatible). We defaulted to not have rotating text for these versions.

We discovered a very interesting bug on IE10 while trying to fade the opacity in and out with the use of a transition so we went for a direct transition without fade using the code below to target IE10 and upwards:


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .pane-row-video-background .svg-loop {
     opacity: 1 !important;
     transition-duration: 0ms;
     transition-property: opacity;
   }
   @-moz-keyframes ie10fix {
     0%, 100% {
       opacity: 1;
     }
   }
   @-webkit-keyframes ie10fix {
     0%, 100% {
       opacity: 1;
     }
   }
   @keyframes ie10fix {
    0%, 100% {
       opacity: 1;
     }
   }
   .pane-row-video-background .walk-fadein {
     animation: ie10fix 16000ms 0ms infinite;
   }
   .pane-row-video-background .run-fadein {
     animation: ie10fix 16000ms 4000ms infinite;
   }
   .pane-row-video-background .swim-fadein {
     animation: ie10fix 16000ms 8000ms infinite;
   }
   .pane-row-video-background .cycle-fadein {
     animation: ie10fix 16000ms 1200ms infinite;
   }
 }

Syncing the background video and the animation of the ‘WALK, RUN, SWIM, CYCLE’ animation. We wrote the piece of javascript below to start the animation once the video got loaded. Once the function has run, it simply adds the class ‘.animation-start’.

$video.one('canplay', function() {
 $animationStart.addClass("animation-start");
});

Challenges

The use of data attributes to enter the length of the video, which in turn is passed into a JS function to calculate the length of the animations to make changing the length of the video at any time easy.

<video autoplay loop data-animation-length="16000ms" poster="poster-image.png" class="video-bg">
 <source src="video.mp4" type="video/mp4">
</video>

The general idea behind this is that by changing a data attribute the animations are calculated based on this attribute. So, if Business want to add a new video that is longer than what we currently have, all we need to do is change the data attribute, and the animations are in sync.


var $animationLength = $animation.data("animation-length");

// calculate the animation delay for each svg path based on animation length attribute
$runAnimationDelay = parseInt($animationLength) / parseFloat(100) * parseFloat(27.82);
$swimAnimationDelay = parseInt($animationLength) / parseFloat(100) * parseFloat(52.55);
$cycleAnimationDelay = parseInt($animationLength) / parseFloat(100) * parseFloat(77.28);

The above calculates the delay for each animation based on a data attribute and the below updates the CSS for the animation.


// update CSS animation delay for each svg path
$run.css({"animation-delay": $runAnimationDelay + "ms", "-webkit-animation-delay": $runAnimationDelay + "ms"});

$swim.css({"animation-delay": $swimAnimationDelay + "ms", "-webkit-animation-delay": $swimAnimationDelay + "ms"});

$cycle.css({"animation-delay": $cycleAnimationDelay + "ms", "-webkit-animation-delay": $cycleAnimationDelay + "ms"});

So that was a quick overview of our first pass at a video background. Send us your thoughts, comments and suggestions for improvement and we would happily like to learn from them.

 

 

Written by matt wagg

Front end developer with a passion for semantic markup, animation and performance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s