Play video
var HeaderVideo = (function ($, document) { var settings = { container: $('.header-video'), header: $('.header-video--media'), videoTrigger: $("#video-trigger"), autoPlayVideo: false } var init = function(options){ settings = $.extend(settings, options); } return { init: init }; })(jQuery, document); var getVideoDetails = function() { videoDetails = { id: settings.header.attr('data-video-src'), teaser: settings.header.attr('data-teaser-source'), provider: settings.header.attr('data-provider').toLowerCase(), videoHeight: settings.header.attr('data-video-height'), videoWidth: settings.header.attr('data-video-width') } return videoDetails; }; var setFluidContainer = function () { settings.container.data('aspectRatio', videoDetails.videoHeight / videoDetails.videoWidth); $(window).resize(function(){ var winWidth = $(window).width(), winHeight = $(window).height(); settings.container .width(winWidth) .height(winWidth * settings.container.data('aspectRatio')); if(winHeight < settings.container.height()) { settings.container .width(winWidth) .height(winHeight); } }).trigger('resize'); }; var createFrame = function() { if(videoDetails.provider === 'youtube') { var html = ''; } else if(videoDetails.provider === 'vimeo') { var html = ''; } else if(videoDetails.provider === 'html5') { var html = ''; } return html; }; var appendTeaserVideo = function() { if(Modernizr.video && !isMobile()) { var source = videoDetails.teaser, html = '''; settings.container.append(html); } }; var isMobile = function () { return Modernizr.touch; } var appendFrame = function() { settings.header.hide(); settings.container.append(createFrame()); $('#teaser-video').hide(); if(settings.videoTrigger) { settings.videoTrigger.fadeOut('slow'); } }; var bindClickAction = function() { settings.videoTrigger.on("click", function(e) { e.preventDefault(); appendFrame(); }); }; .header { position: relative; overflow: hidden; } iframe, video { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } iframe { height: 100%; width: 100%; } .teaser-video { width: 100%; height: auto; } .header-media { width: 100%; height: auto; }

segfwegegh