https://conmee.com/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", 865);
145        } else {
146            $(".fullHeight").css("height", 830);
147        }
148
149        $imageCarousel.css("display", "none");
150        $(".fullHeight").removeClass("mobile-view");
151    } else {
152        $(".fullHeight").css("height", "auto");
153        $imageCarousel.css("display", "block");
154        $(".fullHeight").addClass("mobile-view");
155    }
156
157    // ADJUST THE HEIGHT OF .FULLHEIGHT WHEN RESIZED.
158    $(window).resize(function () {
159        var $imageCarousel = $("#carousel .carousel-item img"),
160			$wWidth = $(window).width(),
161			$wheight = $(window).height();
162
163        // Checks For The Size of The Viewport
164        if ($wWidth > 768) {
165            if ($wheight >= 1020) {
166                $(".fullHeight").css("height", 865);
167            } else {
168                $(".fullHeight").css("height", 830);
169            }
170
171            $imageCarousel.css("display", "none");
172            $(".fullHeight").removeClass("mobile-view");
173        } else {
174            $(".fullHeight").css("height", "auto");
175            $imageCarousel.css("display", "block");
176            $(".fullHeight").addClass("mobile-view");
177        }
178
179        var $uploadedVideo = $("#videoHome");
180
181        fnSizeTheVideo();
182
183        if ($wWidth <= 785) {
184            // Uploaded Video
185            if ($videoIframe.length === 0) {
186
187                var $uploadedVideo = document.getElementById("videoHome");
188                if ($uploadedVideo!=null)
189                {
190                    if (!$uploadedVideo.paused) {
191                        $("#playPauseButton").attr("title", "Play Video");
192                        $("#playPauseButton").find("i").attr("class", "fa fa-play");
193                        $uploadedVideo.pause();
194                        $("#volumeButton").attr("title", "Volume On");
195                        $("#volumeButton").find("i").attr("class", "fa fa-volume-off");
196                        $uploadedVideo.muted = true;
197                    }
198                }
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 +=
240			"?&autoplay=1&loop=1&muted=1&background=1&byline=0&title=0&api=1";
241        $videoIframe.attr("id", "videoCarouselVimeo"),
242			$videoIframe.attr("src", $videoSource);
243        fnCustomVideoButtons();
244    }
245
246    // AUTOMATICALLY GENERATE CAROUSEL INDICATORS
247    for (var i = 0; i < $slideQty; i++) {
248        var insertText =

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