Skip to main content
(function () {
var resizeTimer,
$window,
$lead,
$video,
$videoImage,
$featuredLink,
documentWidth;
function cacheObjects() {
$window = $(window);
$lead = $(‘#lead’);
$video = $(‘#video’);
$videoImage = $(‘#video-image’);
$featuredLink = $(‘.featured-link’);
documentWidth = $window.width();
}
function resizeLead() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
$lead.css(‘height’, ($window.height() – 50) + ‘px’);
}, 250);
}
function onResize() {
// prevent resizing the lead on mobile horizontal scroll
// http://stackoverflow.com/questions/17328742/mobile-chrome-fires-resize-event-on-scroll
if (documentWidth !== $window.width()) {
setImageVideoSize();
documentWidth = $window.width();
resizeLead();
}
}
function toggleLinks() {
if (this.currentTime) {
$featuredLink.addClass(‘fade’);
if (this.currentTime > 5) {
$featuredLink.eq(2).removeClass(‘fade’);
} else if (this.currentTime > 2.75) {
$featuredLink.eq(1).removeClass(‘fade’);
} else if (this.currentTime > 0) {
$featuredLink.eq(0).removeClass(‘fade’);
}
}
}
function showVideoStill() {
$(‘#video-image’).show();
$featuredLink.removeClass(‘fade’);
}
function smoothScroll(e) {
e.preventDefault();
$(‘html, body’).animate({
scrollTop: $($(this).attr(‘data-target’)).offset().top
}, 500);
}
function setupEventHandlers() {
$window.on(‘resize’, onResize);
$video.on(‘timeupdate’, toggleLinks);
$video.on(‘ended’, function() {
showVideoStill();
$video.hide();
});
$(‘.smooth-scroll’).on(‘click’, smoothScroll);
}
function setImageVideoSize() {
var windowWidth = $window.width(),
windowHeight = $window.height(),
aspectRatio = $videoImage.width() / $videoImage.height();
// Resize image/video
if ((windowWidth / windowHeight) < aspectRatio) {
$video.removeClass().css('height', windowHeight);
$videoImage.removeClass().css('height', windowHeight);
} else {
$video.removeClass().css('width', windowWidth);
$videoImage.removeClass().css('width', windowWidth);
}
// Center image/video
if (windowWidth < $videoImage.width()) {
var leftOffset = -(($videoImage.width() - windowWidth) * .5);
$video.css('left', leftOffset);
$videoImage.css('left', leftOffset);
}
if (windowHeight < $videoImage.height()) {
var topOffset = -(($videoImage.height() - windowHeight) * .5);
$video.css('top', topOffset);
$videoImage.css('top', topOffset);
}
}
// Test if video auto plays
function isAutoPlay() {
var mp4 = 'data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ==',
body = document.getElementsByTagName('body')[0];;
var video = document.createElement('video');
video.src = mp4;
video.autoplay = true;
video.volume = 0;
video.style.visibility = 'hidden';
body.appendChild(video);
video.play();
// triggered if autoplay fails
var removeVideoTimeout = setTimeout(function () {
body.removeChild(video);
$('#video').remove();
showVideoStill();
}, 50);
// triggered if autoplay works
video.addEventListener('play', function () {
clearTimeout(removeVideoTimeout);
body.removeChild(video);
}, false);
}
function init() {
cacheObjects();
resizeLead();
setupEventHandlers();
setImageVideoSize();
isAutoPlay();
}
$(init);
} ());