https://image-of-washington-192.netlify.app/assets/js/jquery.yu2fvl.js

1/*! YU2FVL - jQuery Youtube Url To FullScreen Video Lightbox - v0.1.0 - 2016-02-07
2* http://otakod.es/yu2fvl
3* Copyright (c) 2016 darkylmnx; Licensed MIT */
4
5(function ( $, w, doc ) {
6
7    var win = $( w ),
8
9        ytUrlPrefix = "https://www.youtube.com/embed/",
10        getYTvid = function( url ) {
11
12            if ( /youtu\.be/.test( url ) ) {
13
14                return url
15                    .split( "youtu.be/" )[1]
16                    .split( "?" )[0]
17                    .split( "&" )[0]
18                    .split( "#" )[0];
19
20            } else if ( /youtube\.com\/v\//.test( url ) ) {
21
22                return url
23                    .split( "youtube.com/v/" )[1]
24                    .split( "?" )[0]
25                    .split( "&" )[0]
26                    .split( "#" )[0];
27
28            }  else if ( /youtube\.com\/embed\//.test( url ) ) {
29
30                return url
31                    .split( "youtube.com/embed/" )[1]
32                    .split( "?" )[0]
33                    .split( "&" )[0]
34                    .split( "#" )[0];
35
36            } else if ( /youtube.com|youtuberepeater.com|listenonrepeat.com/.test( url ) ) {
37
38                return url
39                    .split( "v=" )[1]
40                    .split( "&" )[0]
41                    .split( "#" )[0];
42
43            } else {
44                return false;
45            }
46        },
47
48        lightboxCss = {
49            "display": "none", 
50            "position": "fixed"
51        },
52
53        iframeCss = {
54            width: "100%",
55            height: "100%"
56        },
57
58        overlayCss = {
59            "display": "none", 
60            "position": "fixed",
61            "top": 0,
62            "left": 0,
63            "width": "100%",
64            "height": "100%"
65        };
66 
67    $.fn.yu2fvl = function( options ) {
68 
69        // default options.
70        var settings = $.extend({
71            minPaddingX: 50,
72            minPaddingY: 50,
73            ratio: 16/9,
74            cssClass: "yu2fvl",
75            overlayCssClass: "-overlay",
76            iframeCssClass: "-iframe",
77            closeCssClass: "-close",
78            closeText: "X",
79            vid: false
80        }, options );
81
82        // if there"s a video id, 
83        if  ( settings.vid !== false ) {
84            createLightbox( this, settings.vid );
85            return this;
86        } else {
87            return this.each(function() {
88                var self = $( this );
89
90                createLightbox(
91                    self,
92                    getYTvid( self.attr("href") )
93                );
94            });
95        }
96
97        function createLightbox ( btn, vid ) {
98            var lightbox = $( doc.createElement( "DIV" ) )
99                    .addClass( settings.cssClass )
100                    .css(lightboxCss ),
101
102                overlay = $( doc.createElement( "DIV" ) )
103                    .addClass( settings.cssClass + settings.overlayCssClass )
104                    .css( overlayCss ),
105
106                close = $(doc.createElement( "BUTTON" ) )
107                    .addClass( settings.cssClass + settings.closeCssClass )
108                    .html( settings.closeText ),
109
110                iframe = $( doc.createElement("IFRAME" ) )
111                    .addClass( settings.cssClass + settings.iframeCssClass )
112                    .attr( { src: ytUrlPrefix + vid } )
113                    .css( iframeCss );
114
115            // append the iframe to the lightbox and the lightbox & overlay to the body
116            lightbox
117                .append( iframe )
118                .append( close );
119
120            $( "body" ).append( overlay ).append( lightbox );
121
122            // open the video on click on the btn
123            attachOpenVideo( btn );
124            attachCloseVideo( close.add( overlay ) );
125
126            // set window resize and trigger to init resize
127            win
128                .on( "resize", resizeVideo )
129                .trigger( "resize" );
130
131            function resizeVideo() {
132                var win_width = win.width() - settings.minPaddingX,
133                    win_height = win.height() - settings.minPaddingY,
134                    win_ratio = win_width / win_height,
135                    ratio = settings.ratio;
136            
137                if ( win_ratio > ratio ) {
138                    lightbox.height( win_height );
139                    lightbox.width( win_height * ratio );
140                }
141                
142                else {
143                    lightbox.width( win_width );
144                    lightbox.height( win_width / ratio );
145                }
146                
147                // we use the original window width and height to not include padding 
148                // in the centering process
149                lightbox.css( "left", ( win.width() - lightbox.width() ) / 2 );
150                lightbox.css( "top", ( win.height() - lightbox.height() ) / 2 );
151            }
152
153            function attachOpenVideo( elem ) {
154                elem.on("click", function ( e ) {
155                    e.preventDefault();
156                    openVideo();
157                });
158            }
159
160            function attachCloseVideo( elem ) {
161                elem.on("click", function ( e ) {
162                    e.preventDefault();
163                    closeVideo();
164                });
165            }
166
167            function openVideo() {
168                overlay
169                    .stop()
170                    .fadeIn( "fast" );
171                lightbox
172                    .stop()
173                    .fadeIn( "fast" );
174            }
175
176            function closeVideo() {
177                overlay
178                    .stop()
179                    .fadeOut( "fast" );
180                lightbox
181                    .stop()
182                    .fadeOut( "fast" );
183            }
184        }
185    };
186 
187})( jQuery, window, document );