https://cellphoneboosterstore.com/scripts/videoPlayer.js

1(function () {
2  // =========================
3  // Variables
4  // =========================
5
6  // $ - prefix, element from DOM
7
8  let $playerWrap = document.getElementById("video_player");
9  const $videoPosters = document.querySelectorAll('.video__poster');
10
11  // =========================
12  // Events
13  // =========================
14
15  if (!$playerWrap) {
16    _addPlayer();
17  }
18
19  if ($videoPosters && $videoPosters.length > 0) {
20    $videoPosters.forEach(item => {
21      item.addEventListener("click", uploadVideo);
22    });
23  }
24
25  window && window.addEventListener("keydown", (e) => {
26    if (e.code === "Escape") pressEscapeKey();
27  });
28
29  // =========================
30  // Functions
31  // =========================
32
33  function pressEscapeKey() {
34    if ($playerWrap && $playerWrap.classList.contains("active")) {
35      closeVideoPlayer();
36    }
37  }
38
39  function uploadVideo(e) {
40    const _parentEl = e.target.closest(".video__poster");
41
42    if (!(_parentEl && $playerWrap)) return;
43
44    const _sourceURL = _parentEl.getAttribute("data-video-url");
45    $playerWrap.innerHTML = '';
46
47    if (!_sourceURL) return;
48
49    const _url = new URL(_sourceURL);
50    const _queryParams = new URLSearchParams(_url.search);
51    const _videoId = _queryParams.get('v');
52
53    const _iframeTemplate = `
54    <iframe
55      src="https://www.youtube.com/embed/${_videoId}?autoplay=1"
56      title="YouTube video player"
57      frameborder="0"
58      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
59      allowfullscreen
60      style="width: 100%; height: 100%;"
61    >
62    </iframe>
63  `;
64
65    $playerWrap.insertAdjacentHTML("beforeend", _iframeTemplate);
66    $playerWrap.classList.add("active");
67    $playerWrap.addEventListener("click", overClickVideoPlayer)
68  }
69
70
71  function overClickVideoPlayer(e) {
72    const _tEl = e.target;
73
74    if (_tEl && _tEl.id === "video_player") {
75      closeVideoPlayer();
76    }
77  }
78
79
80  function closeVideoPlayer() {
81    if (!$playerWrap) return;
82
83    $playerWrap.classList.remove("active");
84    $playerWrap.innerHTML = '';
85  }
86
87
88  function _addPlayer() {
89    const _player = document.createElement("div");
90    _player.id = "video_player";
91    document.body.append(_player);
92
93    $playerWrap = document.getElementById("video_player");
94  }
95})();
96