bgVideo/jquery.bgvideo.js at master · siebevd/bgVideo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
(function($) {

    $.fn.bgVideo = function( options ) {

        var settings = $.extend({
            originalWidth         : 1280,
            originalHeight        : 720,
            resize                : true,
            fill                  : true,
            mp4Src                : false,
            ogvSrc                : false,
            imgSrc                : false,
            options               : 'autoplay loop',
            mobileVideo           : false
        }, options);

        var self = this;

        function loadHandler(){
            if(Modernizr.video){
                if(!settings.mobileVideo){
                    setVideoProperties();
                }else{
                    if($(window).width() > settings.mobileVideo){
                        setVideoProperties();
                    }else{
                        setImageProperties();
                    }
                }
            }else{
                setImageProperties();
            }

            resizeHandler(null);
        }
        function setVideoProperties(){
            $(self).append("<video "+ settings.options+" class='bgVideoSrc'></video>");
            if(settings.mp4Src){
                $(self).find('video').append("<source src='" + settings.mp4Src + "'  type='video/mp4'></source>")
            }
            if(settings.ogvSrc){
                $(self).find('video').append("<source src='" + settings.ogvSrc + "'  type='video/ogg codecs=theora,vorbis'></source>")
            }
        }

        function setImageProperties(){
            $(self).append("<img src=' "+ settings.imgSrc+"' class='bgVideoSrc'></img>");
        }


        function resizeHandler(e){

            if(Modernizr.video){
                var width = $(self).width(),
                    height = $(self).height(),
                    imgEq = width/height,
                    videoEq = settings.originalWidth/settings.originalHeight,
                    vw = width,
                    vh = width/videoEq;

                $(self).css({'overflow':'hidden'});
                $(self).find('.bgVideoSrc').css({'position':'absolute'});


                vh = width/videoEq;

                if(settings.fill){

                    if(imgEq <= videoEq){
                        vw = height * videoEq;
                        vh = height;
                        vDiff = (width - vw)/2;
                        $(self).find('.bgVideoSrc').css({'left':vDiff,'top':0});

                    }else{
                        vw = width;
                        hDiff = (height - vh)/2;
                        $(self).find('.bgVideoSrc').css({'top':hDiff,'left':0});

                    }
                    $(self).find('.bgVideoSrc').css({'width':vw,"height":vh});
                }else{
                    if(imgEq <= videoEq){
                        var centerHor = ($(self).height() - vh)/2;
                        $(self).find('.bgVideoSrc').css({'width':vw,"height":vh,'top':centerHor,'left':0});
                    }else{
                        vw = height * videoEq;
                        vh = height;
                        var centerVer = ($(self).width() - vw)/2;
                        $(self).find('.bgVideoSrc').css({'width':vw,"height":vh,'left':centerVer,'top':'0px'});
                    }

                }

            }
        }

        if(settings.resize){
            $(window).resize(resizeHandler);
        }
        loadHandler();
    }

}(jQuery));