https://rohoon.com/js/video_header.js

1var 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" x-webkit-airplay="true" preload playsInline webkit-playsinline="true" airplay="allow" 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" x-webkit-airplay="true" preload playsInline webkit-playsinline="true" airplay="allow" 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() < 200 && 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);