Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactored the Javascript, added new video
- Loading branch information
1 parent
7a68105
commit 559bf57
Showing
8 changed files
with
121 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,136 +1,89 @@ | ||
| var HeaderVideo = (function ($, document) { | ||
|
|
||
| var settings = { | ||
| container: $('.header-video'), | ||
| video: '#video', | ||
| header: $('.header-video--media'), | ||
| videoTrigger: $('#video-trigger'), | ||
| videoCloseTrigger: $('#video-close-trigger'), | ||
| teaserVideo: $('#teaser-video'), | ||
| autoPlayVideo: false | ||
| }; | ||
|
|
||
| var init = function(options){ | ||
| settings = $.extend(settings, options); | ||
| getVideoDetails(); | ||
| setFluidContainer(); | ||
| bindClickActions(); | ||
| settings.videoCloseTrigger.hide(); | ||
|
|
||
| if(videoDetails.teaser) { | ||
| appendTeaserVideo(); | ||
| } | ||
|
|
||
| if(settings.autoPlayVideo) { | ||
| appendFrame(); | ||
| } | ||
| }; | ||
|
|
||
| var bindClickActions = function() { | ||
| settings.videoTrigger.on('click', function(e) { | ||
| e.preventDefault(); | ||
| appendFrame(); | ||
| settings.videoCloseTrigger.fadeIn(); | ||
| }); | ||
| settings.videoCloseTrigger.on('click', function(e){ | ||
| e.preventDefault(); | ||
| removeFrame(); | ||
| }); | ||
| }; | ||
|
|
||
| var getVideoDetails = function() { | ||
| //Get all the data attributes from the HTML container and return them as an object for easy data retrieval | ||
| 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(Math.ceil(winWidth)) //Round up to the nearest pixel value to prevent breaking of layout | ||
| .height(Math.ceil(winWidth * settings.container.data('aspectRatio'))); //Set the videos aspect ratio, see https://css-tricks.com/fluid-width-youtube-videos/ | ||
|
|
||
| if(winHeight < settings.container.height()) { | ||
| settings.container | ||
| .width(Math.ceil(winWidth)) | ||
| .height(Math.ceil(winHeight)); | ||
| } | ||
|
|
||
| }).trigger('resize'); //Trigger resize to force it to run on page load as well | ||
|
|
||
| }; | ||
|
|
||
| var appendTeaserVideo = function() { | ||
| if(Modernizr.video && !isMobile()) { | ||
| var source = videoDetails.teaser, | ||
| 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>'; | ||
| settings.container.append(html); | ||
| } | ||
| }; | ||
|
|
||
| var createFrame = function() { | ||
| //Added an ID attribute to be able to remove the video element when the user clicks on the remove button | ||
| if(videoDetails.provider === 'youtube') { | ||
| var html = '<iframe id="video" src="http://www.youtube.com/embed/'+videoDetails.id+'?rel=0&hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; | ||
| } | ||
| else if(videoDetails.provider === 'vimeo') { | ||
| var html = '<iframe id="video" src="http://player.vimeo.com/video/'+videoDetails.id+'?title=0&byline=0&portrait=0&color=3d96d2&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; | ||
| } | ||
| else if(videoDetails.provider === 'html5') { | ||
| 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>'; | ||
| } | ||
| return html; | ||
| }; | ||
|
|
||
| var appendFrame = function() { | ||
| settings.header.hide(); | ||
| settings.container.append(createFrame()); | ||
| removePlayButton(); | ||
| settings.teaserVideo.hide(); | ||
| }; | ||
|
|
||
| var removeFrame = function() { | ||
| $(settings.video).remove(); | ||
| settings.teaserVideo.fadeIn(); | ||
| displayPlayButton(); | ||
| removeRemoveButton(); | ||
| }; | ||
| /*global Modernizr, $ */ | ||
|
|
||
| // /** | ||
| // * Reponsive and gracefully degrading header video | ||
| // More info on http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/ | ||
| // * ----------------------------------------------------------------------------- | ||
| // */ | ||
| 'use strict'; | ||
|
|
||
| var HeaderVideo = function(settings) { | ||
| this.$element = $(settings.element); | ||
| this.settings = settings; | ||
| this.videoDetails = this.getVideoDetails(); | ||
| this.init(); | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.init = function() { | ||
| if (this.settings.element.length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| var removePlayButton = function () { | ||
| if(settings.videoTrigger) { | ||
| settings.videoTrigger.fadeOut('slow'); | ||
| } | ||
| }; | ||
| $(this.settings.closeTrigger).hide(); | ||
| this.setFluidContainer(); | ||
| this.bindUIActions(); | ||
|
|
||
| var displayPlayButton = function() { | ||
| if(settings.videoTrigger) { | ||
| settings.videoTrigger.fadeIn('slow'); | ||
| if(this.videoDetails.teaser && Modernizr.video && !Modernizr.touch) { | ||
| this.appendTeaserVideo(); | ||
| } | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.bindUIActions = function() { | ||
| var that = this; | ||
| $(this.settings.playTrigger).on('click', function(e) { | ||
| e.preventDefault(); | ||
| that.appendIframe(); | ||
| }); | ||
| $(this.settings.closeTrigger).on('click', function(e){ | ||
| e.preventDefault(); | ||
| that.removeIframe(); | ||
| }); | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.appendIframe = function() { | ||
| var html = '<iframe id="header-video__video-element" src="'+this.videoDetails.videoURL+'?rel=0&hd=1&autohide=1&showinfo=0&autoplay=1&enablejsapi=1&origin=*" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'; | ||
| $(this.settings.playTrigger).fadeOut(); | ||
| $(this.settings.closeTrigger).fadeIn(); | ||
| this.$element.append(html); | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.removeIframe = function() { | ||
| $(this.settings.playTrigger).fadeIn(); | ||
| $(this.settings.closeTrigger).fadeOut(); | ||
| this.$element.find('#header-video__video-element').remove(); | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.appendTeaserVideo = function() { | ||
| var source = this.videoDetails.teaser, | ||
| html = '<video autoplay="true" loop="true" muted id="header-video__teaser-video" class="header-video__teaser-video"><source src="'+source+'.webm" type="video/mp4"><source src="'+source+'.mp4" type="video/mp4"></video>'; | ||
| this.$element.append(html); | ||
| }; | ||
|
|
||
| HeaderVideo.prototype.setFluidContainer = function() { | ||
| var element = this.$element; | ||
| element.data('aspectRatio', this.videoDetails.videoHeight / this.videoDetails.videoWidth); | ||
|
|
||
| $(window).resize(function() { | ||
| var windowWidth = $(window).width(); | ||
| var windowHeight = $(window).height(); | ||
|
|
||
| element.width(Math.ceil(windowWidth)); | ||
| element.height(Math.ceil(windowWidth * element.data('aspectRatio'))); //Set the videos aspect ratio, see https://css-tricks.com/fluid-width-youtube-videos/ | ||
|
|
||
| if(windowHeight < element.height()) { | ||
| element.width(Math.ceil(windowWidth)); | ||
| element.height(Math.ceil(windowHeight)); | ||
| } | ||
| }; | ||
|
|
||
| var removeRemoveButton = function() { | ||
| settings.videoCloseTrigger.hide(); | ||
| }; | ||
| }).trigger('resize'); | ||
| }; | ||
|
|
||
| var isMobile = function () { | ||
| //A super basic way of detecting mobile devices. Should be extended to a more | ||
| //fool proof way in a production enviroment. | ||
| return Modernizr.touch; | ||
| } | ||
| HeaderVideo.prototype.getVideoDetails = function() { | ||
| var mediaElement = $(this.settings.media); | ||
|
|
||
| return { | ||
| init: init | ||
| videoURL: mediaElement.attr('data-video-URL'), | ||
| teaser: mediaElement.attr('data-teaser'), | ||
| videoHeight: mediaElement.attr('data-video-height'), | ||
| videoWidth: mediaElement.attr('data-video-width') | ||
| }; | ||
|
|
||
| })(jQuery, document); | ||
| }; |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.