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

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