https://www.semprehealth.com/wp-content/themes/sempre2021/dist/js/modules/modalVideoYT.js

1export default function modalVideoYT() {
2
3  if (jQuery('[data-video="youtube"]').length >= 1) {
4
5    const modalHTML = `<!--youtube modal-->
6    <div id="youtubem_new" class="modal fade" tabindex="-1" role="dialog" aria-modal="true" aria-label="Video player" aria-hidden="true">
7        <div class="modal-dialog modal-dialog-centered modal-xl">
8            <div class="modal-content">
9                <div class="modal-header justify-content-end">
10                    <button type="button" class="btn btn-x" data-bs-dismiss="modal" aria-label="Close video"><i class="fa fa-times" aria-hidden="true"></i></button>
11                </div>
12                <div class="modal-body">
13                    <div class="videoWrapper">
14                        <div class="modal-player" id="modalPlayer_new"></div>
15                    </div>
16                </div>
17            </div>
18        </div>
19    </div>`;
20
21    jQuery('body').append(modalHTML);
22
23    if (document.getElementById('iframe_api_new') === null) {
24      var tag = document.createElement('script');
25      tag.src = "https://www.youtube.com/iframe_api";
26      tag.id = "iframe_api_new";
27      var firstScriptTag = document.getElementsByTagName('script')[0];
28      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
29      tag.onload = runplayer;
30    } else {
31      jQuery(document).ready(function () {
32        runplayer();
33      });
34    }
35
36    let player = null;
37    var done = false;
38
39    function runplayer() {
40      window.YT.ready(function () {
41        player = new window.YT.Player('modalPlayer_new', {
42          height: '480',
43          width: '853',
44          events: {
45            'onReady': onPlayerReady,
46            'onStateChange': onPlayerStateChange
47          },
48          playerVars: {
49            controls: 1,
50            rel: 0
51
52          }
53        });
54      });
55    }
56    function onYouTubeIframeAPIReady() {
57      runplayer();
58    }
59    function onPlayerReady(event) {
60
61    }
62    function starter(video) {
63      player.loadVideoById(video, 0, "large");
64    }
65    function onPlayerStateChange(event) {
66      if (player.getPlayerState() == 1) {
67        if (player.isMuted() == true) {
68          player.unMute();
69        }
70      }
71      if (event.data == window.YT.PlayerState.PLAYING && !done) {
72
73      }
74      if (event.data === 0) {
75      }
76    }
77    // Use event delegation so Slick-cloned slides also trigger the modal.
78    jQuery(document).on('click', '[data-video="youtube"]', function (e) {
79      e.preventDefault();
80      var videoid = jQuery(this).attr('data-id');
81      starter(videoid);
82      jQuery('#youtubem_new').modal('show');
83    });
84    jQuery(document).on('click', '#youtubem_new.modal.fade.in', function () {
85      if (player) player.stopVideo();
86    });
87    jQuery(document).on('click', '#youtubem_new button, #youtubem_new', function () {
88      if (player) player.stopVideo();
89    });
90  }
91}