https://lodi-nj.org/Scripts/carousel.js

1var $playerYoutube,
2    $playPauseButton = $('#playPauseButton'),
3    $volumeButton = $('#volumeButton'),
4    $videoIframe = $('.carousel iframe'),
5    $videoSource = $videoIframe.attr('src'),
6    $tag = document.createElement('script'),
7    $firstScriptTag = document.getElementsByTagName('script')[0];
8
9// Injects YouTube API script
10$tag.src = "//www.youtube.com/player_api";
11$firstScriptTag.parentNode.insertBefore($tag, $firstScriptTag);
12
13function fnCustomVideoButtons() {
14    $('#playPauseButton').on('click', function () {
15        if ($videoIframe.length === 0) {
16            var $uploadedVideo = document.getElementById('videoHome');
17
18            if ($uploadedVideo.paused) {
19                $(this).attr('title', 'Pause Video');
20                $(this).find('i').attr('class', 'fa fa-pause');
21                $uploadedVideo.play();
22            } else {
23                $(this).attr('title', 'Play Video');
24                $(this).find('i').attr('class', 'fa fa-play');
25                $uploadedVideo.pause();
26            }
27        } else {
28            if ($(this).hasClass('pausedVideo')) {
29                $(this).removeClass('pausedVideo');
30                $(this).attr('title', 'Pause Video');
31                $(this).find('i').attr('class', 'fa fa-pause');
32                if ($videoSource.search('youtube') > 0) {
33                    $playerYoutube.playVideo();
34                } else {
35                    var $playerVimeo = $f(videoCarouselVimeo);
36                    $playerVimeo.api("play");
37                }
38            } else {
39                $(this).addClass('pausedVideo');
40                $(this).attr('title', 'Play Video');
41                $(this).find('i').attr('class', 'fa fa-play');
42                if ($videoSource.search('youtube') > 0) {
43                    $playerYoutube.pauseVideo();
44                } else {
45                    var $playerVimeo = $f(videoCarouselVimeo);
46                    $playerVimeo.api("pause");
47                }
48            }
49        }
50    });
51
52    $('#volumeButton').on('click', function () {
53        if ($videoIframe.length === 0) {
54            var $uploadedVideo = document.getElementById('videoHome');
55            if ($uploadedVideo.muted) {
56                $(this).attr('title', 'Volume Off');
57                $(this).find('i').attr('class', 'fa fa-volume-up');
58                $uploadedVideo.muted = false;
59            } else {
60                $(this).attr('title', 'Volume On');
61                $(this).find('i').attr('class', 'fa fa-volume-off');
62                $uploadedVideo.muted = true;
63            }
64        } else {
65            if ($(this).hasClass('muteVideo')) {
66                $(this).removeClass('muteVideo');
67                $(this).attr('title', 'Volume Off');
68                $(this).find('i').attr('class', 'fa fa-volume-off');
69                if ($videoSource.search('youtube') > 0) {
70                    $playerYoutube.mute();
71                } else {
72                    var $playerVimeo = $f(videoCarouselVimeo);
73                    $playerVimeo.api('setVolume', 0);
74                }
75            } else {
76                $(this).addClass('muteVideo');
77                $(this).attr('title', 'Volume On');
78                $(this).find('i').attr('class', 'fa fa-volume-up');
79                if ($videoSource.search('youtube') > 0) {
80                    $playerYoutube.unMute();
81                } else {
82                    var $playerVimeo = $f(videoCarouselVimeo);
83                    $playerVimeo.api('setVolume', 1);
84                }
85            }
86        }
87    });
88}
89
90function onPlayerReady() {
91    fnCustomVideoButtons();
92}
93
94function onYouTubePlayerAPIReady() {
95    $playerYoutube = new YT.Player('videoCarouselYoutube', {
96        events: {
97            'onReady': onPlayerReady,
98            'onStateChange': onPlayerStateChange
99        }
100    });
101}
102
103function onPlayerStateChange(event) {
104    if (event.data == YT.PlayerState.PLAYING) {
105        $playPauseButton.removeClass('pausedVideo');
106        $playPauseButton.attr('title', 'Pause Video');
107        $playPauseButton.find('i').attr('class', 'fa fa-pause');
108    } else {
109        $playPauseButton.addClass('pausedVideo');
110        $playPauseButton.attr('title', 'Play Video');
111        $playPauseButton.find('i').attr('class', 'fa fa-play');
112    }
113}
114
115function fnSizeTheVideo() {
116    var $aspectRatio = 1.78;
117
118    var $video = $('.backVideo iframe');
119    var $videoHeight = $video.outerHeight();
120    var $newWidth = $videoHeight * $aspectRatio;
121    var $halfNewWidth = $newWidth / 2;
122
123    //Define the new width and centrally align the iframe
124    $video.css({
125        "width": $newWidth + "px",
126        "left": "50%",
127        "margin-left": "-" + $halfNewWidth + "px"
128    });

129}
130
131$(function () {
132    'use strict';
133
134	// CAROUSEL SECTION
135	// MAKES THE IMAGES AS BACKGROUND-IMAGE INSIDE THE CAROUSEL (DEFAULT.ASPX)
136    var $wWidth = window.innerWidth,
137        $wheight = $(window).height(),
138        $imageCarousel = $('#carousel .carousel-item img'),
139	    $slideQty = $('#carousel .carousel-item').length; // COUNTS THE CAROUSEL INDICATORS
140
141      // Checks For The Size of The Viewport
142	if ($wWidth > 768) {
143	    if ($wheight >= 1020) {
144	        $('.fullHeight').css('height', 840);
145	    } else {
146	        $('.fullHeight').css('height', $wheight);
147	    }
148
149	    $imageCarousel.css('display', 'none');
150        $('.fullHeight').removeClass('mobile-view');
151        $('.masterHeader').removeClass('master-mobile');
152
153	} else {
154	    $('.fullHeight').css('height', 'auto');
155	    $imageCarousel.css('display', 'block');
156        $('.fullHeight').addClass('mobile-view');
157        $('.masterHeader').addClass('master-mobile');
158	}
159	
160	// ADJUST THE HEIGHT OF .FULLHEIGHT WHEN RESIZED.
161	$(window).resize(function(){
162		var $imageCarousel = $('#carousel .carousel-item img'),
163            $wWidth = window.innerWidth,
164            $wheight = $(window).height();
165		
166        // Checks For The Size of The Viewport
167        if ( $wWidth > 768 ) {
168            if($wheight>=1020){
169                $('.fullHeight').css('height', 840);
170			}else{
171				$('.fullHeight').css('height', $wheight);
172			}
173
174            $imageCarousel.css('display', 'none');
175            $('.fullHeight').removeClass('mobile-view');
176            $('.masterHeader').removeClass('master-mobile');
177
178        } else {
179            $('.fullHeight').css('height', 'auto');
180            $imageCarousel.css('display', 'block');
181            $('.fullHeight').addClass('mobile-view');
182            $('.masterHeader').addClass('master-mobile');
183        }
184
185
186
187        var $uploadedVideo = $('#videoHome');
188
189        fnSizeTheVideo();
190
191        if ($wWidth <= 785) {
192            // Uploaded Video
193            if ($videoIframe.length === 0) {
194                var $uploadedVideo = document.getElementById('videoHome');
195
196                if (!$uploadedVideo.paused) {
197                    $('#playPauseButton').attr('title', 'Play Video');
198                    $('#playPauseButton').find('i').attr('class', 'fa fa-play');
199                    $uploadedVideo.pause();
200                    $('#volumeButton').attr('title', 'Volume On');
201                    $('#volumeButton').find('i').attr('class', 'fa fa-volume-off');
202                    $uploadedVideo.muted = true;
203                }
204            } else {
205                $('#playPauseButton').addClass('pausedVideo');
206                $('#playPauseButton').attr('title', 'Play Video');
207                $('#playPauseButton').find('i').attr('class', 'fa fa-play');
208                if ($videoSource.search('youtube') > 0) {
209                    $playerYoutube.pauseVideo();
210                } else {
211                    var $playerVimeo = $f(videoCarouselVimeo);
212                    $playerVimeo.api("pause");
213                }
214                $('#volumeButton').removeClass('muteVideo');
215                $('#volumeButton').find('i').attr('class', 'fa fa-volume-off');
216                if ($videoSource.search('youtube') > 0) {
217                    $playerYoutube.mute();
218                } else {
219                    var $playerVimeo = $f(videoCarouselVimeo);
220                    $playerVimeo.api('setVolume', 0);
221                }
222            }
223        }
224    });
225
226    fnSizeTheVideo();
227    // Uploaded Video
228    if ($videoIframe.length === 0) {
229        fnCustomVideoButtons();
230    }
231
232    // Youtube Video
233    else if ($videoSource.search('youtube') > 0) {
234        $videoIframe.removeAttr('width height frameborder');
235        $videoSource += '?&autoplay=1&loop=1&controls=0&mute=1&enablejsapi=1';
236        $videoIframe.attr('id', 'videoCarouselYoutube'),
237        $videoIframe.attr('src', $videoSource);
238    }
239
240    // Vimeo Video
241    else if ($videoSource.search('vimeo') > 0) {
242        $videoIframe.removeAttr('width height frameborder');
243        $videoSource += '?&autoplay=1&loop=1&muted=1&background=1&byline=0&title=0&api=1';
244        $videoIframe.attr('id', 'videoCarouselVimeo'),
245        $videoIframe.attr('src', $videoSource);
246        fnCustomVideoButtons();
247    }
248	
249	// AUTOMATICALLY GENERATE CAROUSEL INDICATORS
250	for( var i=0; i < $slideQty; i++ ){

251		var insertText = '<li data-target="#carousel" data-slide-to="' +i+ '"></li>';
252		
253		$('#carousel ul').append(insertText);
254		$('#carousel ul li:first-child').addClass('active');
255	}
256	
257	$('#carousel').carousel({
258		pause: false,
259		interval: 7000
260	});
261
262    // ATTACH A SWIPE EVENT
263    $(".carousel-inner img").swipe({
264	    swipeLeft: function (event, direction, distance, duration, fingerCount) {
265	        $(this).parent().carousel('prev');
266	    },
267	    swipeRight: function () {
268	        $(this).parent().carousel('next');
269	    },
270	    threshold: 0
271    });
272});