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

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