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

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