').appendTo($slider),
animate = {
up: 'animate__animated animate__fadeInUp',
left: 'animate__animated animate__slideInLeft',
right: 'animate__animated animate__slideInRight'
},
getCaption = function($figcaption){
return {
video: $figcaption.data('isvideo') || false,
showplayicon: $figcaption.data('showplayicon') || false,
title: $figcaption.data('title') || '',
description: $figcaption.data('description') || '',
byline: $figcaption.data('byline') || ''
}
},
getCaptionHTML = function(animation, caption) {
return ['
',
caption.video && caption.showplayicon ? '
' : '',
caption.title ? '
'+caption.title+'
' : '' ,
caption.description ? '
'+caption.description+'
' : '' ,
caption.byline ? '
'+caption.byline+'
' : '',
'
'].join('');
},
populateCaption = function($slide, $clones, animation, currentSlide){
let ani = animation || animate.up;
let caption = getCaption($slide.find('figcaption').eq(0));
$slide.find('figcaption').html(getCaptionHTML(ani, caption));
if($clones)
$clones.find('figcaption').html(getCaptionHTML(ani, caption));
if (currentSlide == undefined)
currentSlide = 1;
$slide.find('a.' + $slide.attr('class').replace('4424', 'content')).attr('title', caption.title + ', Slide ' + currentSlide + ' of 6')
},
populateSlideCount = function (currentSlide, count) {
$slider.find('.flex-control-nav').css('display','none');
$slideCount.html('Slide ' + currentSlide + ' of ' + count);
};
populateCaption($slider.find('li:eq(0)')); //initial state animation
$slider.removeAttr("style");
if (6 > 1) {
let animationLoop = window.navigator.userAgent.match(/(MSIE|Trident)/) ? false : true;
$slider.flexslider({
slideshowSpeed: 7000,
slideshow: true,
animationLoop: animationLoop,
animation: "slide",
controlNav: showControlNav,
directionNav: true,
touch: true,
start: function(slider){
if (!showControlNav)
populateSlideCount(slider.animatingTo + 1, 6);
},
before: function(slider){
let $slide = slider.find('li:not(.clone):eq('+slider.animatingTo +')');
let $clones = slider.find('.clone');
let animation = slider.direction === 'next' ? animate.right : animate.left;
populateCaption($slide, $clones, animation, slider.animatingTo + 1);
},
after: function(slider){
if (!showControlNav)
populateSlideCount(slider.animatingTo + 1, 6);
}
});
}
initDVIDSBackground4424();
initPortraitImages4424();
});
function initPortraitImages4424(){
$('#focal-point-hero-wrap-4424').find('figure img').each(function(){
handlePortraits($(this));
function handlePortraits($this){
let img = new Image();
let src = $this[0].src;
let $blur = '
';
img.onload = function() {
if(this.height > this.width){
$this.closest('picture').addClass('portrait').append($blur);
}
}
img.src = src;
}
});
}
/* DVIDS background video */
function initDVIDSBackground4424(){
$('#focal-point-hero-wrap-4424').find('.dvids-video-background video').each(function(){
let $this = $(this);
const data = $this.data('video');
let sources = '';
let lastIndex = data.results.files.length-1;
const bgVideoStart = $this.attr('data-start');
const bgVideoEnd = $this.attr('data-end');
var watchCurrentTime;
$this[0].onloadeddata = function(){
$this.closest('picture').find('img, .bg-image-fallback').fadeOut();
};
$this[0].addEventListener('loadedmetadata', function(event) {
event.target.currentTime = bgVideoStart;
}, false);
$this[0].addEventListener('canplay', function (event) {
event.target.play();
if(watchCurrentTime) clearInterval(watchCurrentTime);
watchCurrentTime = setInterval(function (){
const videoDuration = event.target.duration
const videoCurrentTime = event.target.currentTime;
const timeDifference = videoDuration - videoCurrentTime;
if(videoCurrentTime > bgVideoEnd || event.target.paused){
event.target.currentTime = bgVideoStart;
if(event.target.paused) event.target.play(); //IE11 will pause after a half a sec or so if this is in a carousel due to other manipulation so force play
return;
}
}, 1000);
});
$this[0].addEventListener('loadedmetadata', function(event) {
try {
event.target.currentTime = bgVideoStart;
}
catch (err) {
return;
}
}, false);
sources += '
';
$this.html(sources);
});
}
/* end DVIDS background video */
/* youtube background code */
const script4424 = document.createElement('script');
script4424.src = "https://www.youtube.com/iframe_api";
const firstScriptTag4424 = document.getElementsByTagName('script')[0];
firstScriptTag4424.parentNode.insertBefore(script4424, firstScriptTag4424);
function initYoutubeBackground4424(){
$('#focal-point-hero-wrap-4424').find('.yt-video-background').each(function(){
var $this = $(this);
const bgVideoID = $this.attr('data-video');
const bgVideoStart = $this.attr('data-start');
const bgVideoEnd = $this.attr('data-end');
var bgVideoHeight = 720; //these will be overwritten from actual video data
var bgVideoWidth = 1280;
const ytPlayerID = $this.find('.yt-player').attr('id');
const playerOptions = {
autoplay: 1,
start: bgVideoStart,
//end: bgVideoEnd,not respected on loop
mute: 1,
autohide: 1,
modestbranding: 1,
rel: 0,
showinfo: 0,
controls: 0,
disablekb: 1,
enablejsapi: 1,
iv_load_policy: 3,
loop: 1,
playlist: bgVideoID
};
let ytPlayer = new YT.Player(ytPlayerID, {
width: '1280', //will get overwritten
height: '720',
videoId: bgVideoID,
playerVars: playerOptions,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
function onPlayerReady(event) {
event.target.playVideo();
setTimeout(function(){
$this.closest('picture').find('img').fadeOut();
},3000);
const videoDuration = event.target.getDuration();
bgVideoHeight = ytPlayer.playerInfo.videoEmbedCode.match(/height\=\"([0-9]*)\"*/)[0].replace(/"/g,'').replace(/height=/,'') || bgVideoHeight;
bgVideoWidth = ytPlayer.playerInfo.videoEmbedCode.match(/width\=\"([0-9]*)\"*/)[0].replace(/"/g,'').replace(/width=/,'') || bgVideoWidth;
setInterval(function (){
const videoCurrentTime = event.target.getCurrentTime();
const timeDifference = videoDuration - videoCurrentTime;
if (2 > timeDifference > 0) {
event.target.seekTo(0);
return;
}
if(videoCurrentTime > bgVideoEnd){
event.target.seekTo(bgVideoStart);
return;
}
}, 1000);
}
function onPlayerStateChange(event) {
if (ytPlayer && ytPlayer.getPlayerState && event.data == ytPlayer.getPlayerState()) {
sizeTheIframe($this);
}
}
function sizeTheIframe($ele){
var $video = $ele.find('iframe');
var epsilon = Number.EPSILON || 0; //ie11
var videoAspect = Math.round((bgVideoWidth/bgVideoHeight + epsilon) * 100) / 100;
var parentWidth = $ele.outerWidth();
var parentHeight = $ele.outerHeight();
var parentAspect = Math.round((parentWidth/parentHeight + epsilon) * 100) / 100;
var newHeight, newWidth;
if(parentAspect > videoAspect){ //parent is wider
newWidth = parentWidth;
newHeight = newWidth/videoAspect;
} else {
newHeight = parentHeight;
newWidth = newHeight*videoAspect;
}
//Define the new dimensions and centrally align the iframe
$video.css({
"width":newWidth+"px",
"height":newHeight+"px",
"left":"50%",
"margin-left":"-"+newWidth/2+"px",
"top": "50%",
"margin-top":"-"+newHeight/2+"px"
});
}
sizeTheIframe($this);
$(window).resize(function(){
sizeTheIframe($this);
});
}); //each
}
function onYouTubeIframeAPIReady() {
$(document).ready(function(){
initYoutubeBackground4424();
});
}
/* end youtube background code */