https://t20wclive.com/frontend/assets/slidervideo/script.js

1(function () {
2  "use strict";
3
4  // youtube or vimeo
5  function checkPlayerName(url) {
6    if (url === "false") return false;
7
8    var result = url.match(
9      /(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(&\S+)?/
10    );
11
12    if (result && /youtube/g.test(result[3])) {
13      return "youtube";
14    } else if (result && /vimeo/g.test(result[3])) {
15      return "vimeo";
16    }
17
18    return false;
19  }
20
21  // youtube or vimeo
22  function getVideoId(url) {
23    if (url === "false") return false;
24
25    var result = url.match(
26      /(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(&\S+)?/
27    );
28
29    return result ? result[6] : false;
30  }
31
32  function getYTPreviewUrl(videoId, quality) {
33    return (
34      "https://img.youtube.com/vi/" +
35      videoId +
36      "/" +
37      (quality || "") +
38      "default.webp"
39    );
40  }
41
42  function getVimeoPreviewUrl(vimeoId, callback) {
43    var request = new XMLHttpRequest();
44    request.open(
45      "GET",
46      "https://vimeo.com/api/v2/video/" + vimeoId + ".json",
47      true
48    );
49    request.onreadystatechange = function () {
50      if (this.readyState === 4) {
51        if (this.status >= 200 && this.status < 400) {
52          var response = JSON.parse(this.responseText);
53
54          callback(response[0].thumbnail_large);
55        }
56      }
57    };
58    request.send();
59    request = null;
60  }
61
62  var getYTPreviewUrlWithBestQuality = (function () {
63    var cache = {};
64
65    return function (id) {
66      var def = $.Deferred();
67      if (id in cache) {
68        if (cache[id]) {
69          def.resolve(cache[id]);
70        } else {
71          def.reject("Preview image not found.");
72        }
73      } else {
74        $("<img>")
75          .on("load", function () {
76            if (120 === (this.naturalWidth || this.width)) {
77              // selection of preview in the best quality
78              var file = this.src.split("/").pop();
79              switch (file) {
80                case "maxresdefault.webp":
81                  this.src = this.src.replace(file, "sddefault.webp");
82                  break;
83                case "sddefault.webp":
84                  this.src = this.src.replace(file, "hqdefault.webp");
85                  break;
86                case "hqdefault.webp":
87                  this.src = this.src.replace(file, "default.webp");
88                  break;
89                default:
90                  cache[id] = null;
91                  def.reject("Preview image not found.");
92                  break;
93              }
94            } else {
95              def.resolve((cache[id] = this.src));
96            }
97          })
98          .attr("src", getYTPreviewUrl(id, "maxres"));
99      }
100
101      return def;
102    };
103  })();
104
105  /*
106   * check for youtube/vimeo video section and
107   * load videopreview from youtube/vimeo on 'add' event and enable YTPlayer/vimeo_player
108   * */
109  if (!$("html").hasClass("is-builder")) {
110    $(document).on("add.cards", function (event) {
111      if (!$(event.target).hasClass("carousel")) return;
112      var isDesktop = $("html").hasClass("desktop");
113
114      $(event.target)
115        .outerFind("[data-bg-video-slide]")
116        .each(function () {
117          var videoId = getVideoId($(this).attr("data-bg-video-slide"));
118          if (!videoId) return;
119
120          var $preview = $(
121            '<div class="mbr-background-video-preview"></div>'
122          ).css({
123            display: "none",
124            backgroundSize: "cover",
125            backgroundPosition: "center",
126          });
127
128          $(".container-slide", this).before($preview);
129          var playerName = checkPlayerName($(this).attr("data-bg-video-slide"));

130          var $overlay = $(this).find(".mbr-overlay");
131
132          if (playerName === "youtube") {
133            getYTPreviewUrlWithBestQuality(videoId).done(function (url) {
134              $preview.css("background-image", 'url("' + url + '")').show();
135            });
136
137            if (
138              isDesktop &&
139              $.fn.YTPlayer &&
140              !$(this).find(".playerBox").length
141            ) {
142              $(".container-slide", this)
143                .before('<div class="mbr-background-video"></div>')
144                .prev()
145                .YTPlayer({
146                  videoURL: videoId,
147                  containment: "self",
148                  showControls: false,
149                  mute: true,
150                });
151
152              if ($overlay.length) {
153                $(".YTPOverlay", this).css({
154                  opacity: $overlay.css("opacity"),
155                  backgroundColor: $overlay.css("background-color"),
156                });
157              }
158
159              $(this).find(".image_wrapper img").css("opacity", "0");
160              $(this).find(".image_wrapper .mbr-overlay").css("opacity", "0");
161            }
162          } else {
163            getVimeoPreviewUrl(videoId, function (url) {
164              $preview.css("background-image", 'url("' + url + '")').show();
165            });
166
167            if (
168              isDesktop &&
169              $.fn.vimeo_player &&
170              !$(this).find(".playerBox").length
171            ) {
172              $(".container-slide", this)
173                .before('<div class="mbr-background-video"></div>')
174                .prev()
175                .vimeo_player({
176                  videoURL: videoId,
177                  containment: "self",
178                  showControls: false,
179                  mute: true,
180                });
181
182              if ($overlay.length) {
183                $(".vimeo_player_overlay", this).css({
184                  opacity: $overlay.css("opacity"),
185                  backgroundColor: $overlay.css("background-color"),
186                });
187              }
188            }
189          }
190        });
191
192      $(event.target).find(".carousel-item iframe").css({
193        transitionProperty: "opacity",
194        transitionDuration: "1000ms",
195      });
196
197      // pause YTPlayer/vimeo_player in hidden slides, apply some css rules
198      $(this).on("slide.bs.carousel", "section.carousel", function (event) {
199        $(event.target)
200          .find(".carousel-item.active .mb_YTPlayer")
201          .each(function () {
202            $(this).YTPPause();
203          });
204
205        $(event.target)
206          .find(".carousel-item.active .vimeo_player")
207          .each(function () {
208            $(this).v_pause();
209          });
210
211        $(event.target)
212          .find(".carousel-item:not(.active) iframe")
213          .css("opacity", 0);
214      });
215
216      // start YTPPlayer in active slides, apply some css rules
217      $(this).on("slid.bs.carousel", "section.carousel", function (event) {
218        $(event.target)
219          .find(".carousel-item.active .mb_YTPlayer")
220          .each(function () {
221            $(this).YTPPlay();
222          });
223
224        $(event.target)
225          .find(".carousel-item.active .vimeo_player")
226          .each(function () {
227            $(this).v_play();
228          });
229
230        $(event.target)
231          .find(".carousel-item.active iframe")
232          .resize()
233          .css("opacity", 1);
234      });
235    });
236  }
237})();