https://www.hotelfuntw.com/public/js/youtubePlugin.js

1"use strict";
2
3if (typeof window.onYouTubeIframeAPIReady === "function") {
4  new Error("YouTube API is already loaded");
5}
6
7window.onYouTubeIframeAPIReady = () => {
8  console.log("YouTube API is ready");
9  window.onYouTubeIframeAPIReady = null;
10};
11
12(function () {
13  const tag = document.createElement("script");
14  tag.src = "https://www.youtube.com/iframe_api";
15  const firstScriptTag = document.getElementsByTagName("script")[0];
16  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
17})();
18
19class YTPlayer {
20  constructor(container, options) {
21    this.container = container;
22    this.options = options;
23    this.player = null;
24    this.ratio = [];
25  }
26  async load() {
27    await new Promise((resolve, reject) => {
28      let connectTime = 0;
29      let timer = setInterval(() => {
30        if (connectTime > 15000) {
31          reject(new Error("API connection timeout"));
32          clearInterval(timer);
33        }
34        if (onYouTubeIframeAPIReady === null) {
35          clearInterval(timer);
36          resolve(true);
37        }
38        connectTime += 100;
39      }, 100);
40    }).catch((err) => {
41      throw new Error(err);
42    });
43    if (this.options.videoId === undefined) {
44      throw new Error("YouTube ID is not defined");
45    }
46    this.player = new YT.Player(this.container, this.options);
47    return new Promise(async (resolve, reject) => {
48      this.player.addEventListener("onReady", (e) => {
49        // 注入比例設定功能，格式範例 '16:9', '4:3', '21:9'
50        this.player.setAspectRatio = (ratio) => {
51          if (!ratio) {
52            throw new Error("Aspect ratio can only be a string!");
53          }
54          const iframe = this.player.getIframe();
55          this.ratio = ratio.split(':');
56          if (this.ratio.length === 2) {
57            this.player.setSize(iframe.clientWidth, iframe.clientWidth / (this.ratio[0] / this.ratio[1]));
58          }
59        };
60        window.addEventListener("resize", () => {
61          if (this.ratio.length === 2) {
62            const iframe = this.player.getIframe();
63            this.player.setSize(iframe.clientWidth, iframe.clientWidth / (this.ratio[0] / this.ratio[1]));
64          }
65        });
66        resolve(e.target);
67      });
68    }).catch((err) => {
69      throw new Error(err);
70    });
71  }
72}