https://peaceinourcities.org/wp-content/themes/pioc/js/youtubeVimeo.js?ver=v1753831986

1function create_youtube_video_embed(jq_item) {
2  if (typeof window.background_video_init == "undefined") {
3    window.background_video_init = true;
4    window.background_video_ready = false;
5
6    window.onYouTubeIframeAPIReady = function () {
7      window.background_video_ready = true;
8    };
9
10    var youtubeTag = document.createElement("script");
11    youtubeTag.src = "https://www.youtube.com/iframe_api";
12
13    var youtubeScriptTag = document.getElementsByTagName("script")[0];
14    youtubeScriptTag.parentNode.insertBefore(youtubeTag, youtubeScriptTag);
15
16    var vimeoTag = document.createElement("script");
17    vimeoTag.src = "https://player.vimeo.com/api/player.js";
18
19    var videmoScriptTag = document.getElementsByTagName("script")[0];
20    videmoScriptTag.parentNode.insertBefore(vimeoTag, videmoScriptTag);
21
22    setTimeout(function () {
23      create_youtube_video_embed(jq_item);
24    }, 20);
25  } else if (window.background_video_ready) {
26    // generate player id
27    var player_id = "player-" + Date.now() + "-" + Math.random();
28
29    // check if youtube or vimeo video
30    const isYoutube = !jq_item.hasClass("vimeo");
31

32    // create player wrapper and give id
33    jq_item.addClass("player-ready");
34    jq_item.append('<div id="' + player_id + '"></div>');
35
36    // create poster
37    var poster = jQuery('<div class="poster" />');
38    jq_item.append(poster);
39
40    // check youtube or vimeo poster
41    if (isYoutube) {
42      poster.css(
43        "background-image",
44        'url("https://img.youtube.com/vi/' +
45        jq_item.data("video-id") +
46        '/hqdefault.jpg")',
47      );
48    } else {
49      jQuery.get(
50        `https://vimeo.com/api/v2/video/${jq_item.data("video-id")}.json`,
51        (data) => {
52          const result = data[0];
53          poster.css("background-image", `url(${result.thumbnail_large})`);
54        },
55      );
56    }
57
58    var playing = false;
59    let player;
60
61    if (isYoutube) {
62      // create youtube iframe object
63      player = new YT.Player(player_id, {
64        height: "640",
65        width: "380",
66        videoId: jq_item.data("video-id"),
67        playerVars: {
68          autoplay: 0,
69          mute: 0,
70          muted: 0,
71          autohide: 1,
72          controls: 1,
73          showinfo: 0,
74          modestbranding: 1,
75          wmode: "transparent",
76          disablekb: 1,
77          enablejsapi: 1,
78          fs: 0,
79          loop: 1,
80          rel: 0,
81          playsinline: 1,
82        },
83        events: {
84          onReady: function (e) {
85            if (playing) {
86              player.playVideo();
87            }
88            // player.mute();
89            // player.seekTo(0);
90          },
91          onStateChange: function (e) {
92            if (e.data == 0) {
93              player.seekTo(0);
94            }
95          },
96        },
97      });
98    } else {
99      // or create vimeo youtube object
100      player = new Vimeo.Player(player_id, {
101        id: jq_item.data("video-id"),
102        autoplay: 0,
103        controls: 1,
104      });
105    }
106
107    // add iframe to wrapper
108    jq_item.data("player", player);
109
110    // create and add button to wrapper
111    var btn_play = jQuery('<div class="play"></div>');
112    jq_item.append(btn_play);
113
114    // add play/pause events to play button
115    btn_play.click(function () {
116      if (!playing) {
117        playing = true;
118
119        jq_item.addClass("playing");
120        if (isYoutube) {
121          player.playVideo();
122        } else {
123          player.play();
124        }
125      } else {
126        playing = false;
127        jq_item.removeClass("playing");
128
129        if (isYoutube) {
130          player.stopVideo();
131        } else {
132          player.pause();
133        }
134      }
135    });
136  } else {
137    setTimeout(function () {
138      create_youtube_video_embed(jq_item);
139    }, 20);
140  }
141}
142
143function youtube_video_embeds() {
144  jQuery('.youtube-video-embed:not("player-ready")').each(function () {
145    create_youtube_video_embed(jQuery(this));
146  });
147}
148
149jQuery(function () {
150  youtube_video_embeds();
151});
152
153const videos = document.querySelectorAll(".youtube-video-embed");
154
155for (let video of videos) {
156  video.addEventListener("click", ({ target }) => {
157    let play = target.querySelector(".play");
158
159    if (play) play.click();
160  });
161}