JAVASCRIPT   151

video_header.js

Guest on 6th August 2021 06:46:43 PM

  1. var HeaderVideo = (function ($, document) {
  2.    
  3.     var settings = {
  4.         container: $('.header-video'),
  5.         header: $('.header-video--media'),
  6.         videoTrigger: $("#video-trigger"),
  7.         videoCloseTrigger: $('#video-close-trigger'),
  8.         teaserVideo: $('#teaser-video'),
  9.         autoPlayVideo: false
  10.     }
  11.  
  12.     var init = function(options){
  13.         settings = $.extend(settings, options);
  14.         getVideoDetails();
  15.         setFluidContainer();
  16.         bindClickAction();
  17.         settings.videoCloseTrigger.hide();
  18.        
  19.         if(videoDetails.teaser) {
  20.             appendTeaserVideo();
  21.         }
  22.  
  23.         if(settings.autoPlayVideo) {
  24.             appendFrame();
  25.         }
  26.     }
  27.  
  28.     var getVideoDetails = function() {
  29.         videoDetails = {
  30.             id: settings.header.attr('data-video-src'),
  31.             teaser: settings.header.attr('data-teaser-source'),
  32.             provider: settings.header.attr('data-provider').toLowerCase(),
  33.             videoHeight: settings.header.attr('data-video-height'),
  34.             videoWidth: settings.header.attr('data-video-width')
  35.         }
  36.         return videoDetails;
  37.     };
  38.  
  39.     var setFluidContainer = function () {
  40.  
  41.         settings.container.data('aspectRatio', videoDetails.videoHeight / videoDetails.videoWidth);
  42.  
  43.         $(window).resize(function(){
  44.             var winWidth = $(window).width(),
  45.                 winHeight = $(window).height();
  46.  
  47.             settings.container
  48.                 .width(winWidth)
  49.                 .height(winWidth * settings.container.data('aspectRatio'));
  50.  
  51.             if(winHeight < settings.container.height()) {
  52.                 settings.container
  53.                     .width(winWidth)
  54.                     .height(winHeight);
  55.             }
  56.  
  57.         }).trigger('resize');
  58.  
  59.     };
  60.  
  61.     var bindClickAction = function() {
  62.         settings.videoTrigger.on("click", function(e) {
  63.             e.preventDefault();
  64.             appendFrame();
  65.             settings.videoCloseTrigger.fadeIn();
  66.         });
  67.         settings.videoCloseTrigger.on("click", function(e){
  68.             e.preventDefault();
  69.             removeFrame();
  70.         });
  71.     };
  72.  
  73.     var appendTeaserVideo = function() {
  74.         if(Modernizr.video && !isMobile()) {
  75.             var source = videoDetails.teaser,
  76.                 html = '<video autoplay="true" loop="loop" muted id="teaser-video" class="teaser-video"><source src="'+source+'.mp4" type="video/mp4"><source src="'+source+'.ogv" type="video/ogg"></video>';
  77.             settings.container.append(html);
  78.         }
  79.     };
  80.    
  81.     var createFrame = function() {
  82.         // Added an ID attribute to be able to remove the video element when the user clicks on the remove button
  83.         if(videoDetails.provider === 'youtube') {
  84.             var html = '<iframe id="video" src="http://www.youtube.com/embed/'+videoDetails.id+'?rel=0&amp;hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  85.         }
  86.         else if(videoDetails.provider === 'vimeo') {
  87.             var html = '<iframe id="video" src="http://player.vimeo.com/video/'+videoDetails.id+'?title=0&amp;byline=0&amp;portrait=0&amp;color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
  88.         }
  89.         else if(videoDetails.provider === 'html5') {
  90.             var html = '<video autoplay="true" loop="loop" id="video"><source src="'+videoDetails.id+'.mp4" type="video/mp4"><source src="'+videoDetails.id+'.ogv" type="video/ogg"></video>';
  91.         }
  92.         return html;
  93.     };
  94.  
  95.     var appendFrame = function() {
  96.         settings.header.hide();
  97.         settings.container.append(createFrame());
  98.         removePlayButton();
  99.         settings.teaserVideo.hide();
  100.     };
  101.  
  102.     var removeFrame = function() {
  103.         $('#video').remove();
  104.         settings.teaserVideo.fadeIn();
  105.         displayPlayButton();
  106.         removeRemoveButton();
  107.     };
  108.  
  109.     var removePlayButton = function () {
  110.         if(settings.videoTrigger) {
  111.             settings.videoTrigger.fadeOut('slow');
  112.         }
  113.     };
  114.  
  115.     var displayPlayButton = function() {
  116.         if(settings.videoTrigger) {
  117.             settings.videoTrigger.fadeIn('slow');
  118.         }
  119.     };
  120.  
  121.     var removeRemoveButton = function() {
  122.         settings.videoCloseTrigger.hide();
  123.     };
  124.  
  125.     var isMobile = function () {
  126.         if($(window).width() < 900 && Modernizr.touch) {
  127.             return true;
  128.         }
  129.         else {
  130.             return false;
  131.         }
  132.  
  133.     }
  134.  
  135.     return {
  136.         init: init
  137.     };
  138.    
  139. })(jQuery, document);

Raw Paste


Login or Register to edit or fork this paste. It's free.