https://agwm.org/static/javascript/custom.js

1
2function isMobile() {
3    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
4}
5
6function getYouTubeVideoId(url) {
7    var videoId = '';
8    var regExp = /^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/;
9    var match = url.match(regExp);
10    if (match && match[1].length === 11) {
11        videoId = match[1];
12    }
13    return videoId;
14}
15
16// Function to open the lightbox
17function openLightbox(videoUrl, container, height) {
18
19    if (container) {
20
21    } else {
22        document.getElementById('lightbox-card').style.display = 'block';
23        document.getElementById('closeLightbox').style.display = 'none';
24        
25        const cardElement = document.getElementById('lightbox-content');
26        var newDiv = document.createElement("div");
27        newDiv.setAttribute("id", "videoContainer");
28        cardElement.appendChild(newDiv);  
29    }
30    
31
32    
33    if (videoUrl.includes('youtube.com') || videoUrl.includes('youtu.be')) {
34
35        const onPlayerReady = () => {
36            document.getElementById('closeLightbox').style.display = 'block';
37        }
38
39        // Create the YouTube player
40        const options = {
41            videoId: getYouTubeVideoId(videoUrl),
42            playerVars: {
43              'autoplay': 1,
44              'controls': 1,
45              'rel': 0,
46              'showinfo': 0
47            },
48            events: {
49                'onReady': onPlayerReady
50            }
51        }
52
53        if (height && !isMobile()) {
54            options.width = '100%'
55            options.height = height
56        }
57
58        const player = new YT.Player(container ? container : 'videoContainer', options);
59
60        if (player && isMobile()) {
61            player.setSize(320, 200);
62        }
63          
64    } else {
65
66        // Create the Vimeo player
67        const options = {
68            width: isMobile() ? 320 : 800,
69            url: videoUrl,
70            autoplay: false,
71            muted: true
72        };
73
74        if (height && !isMobile()) {
75            options.height = height
76        }
77
78        const player = new Vimeo.Player(container ? container : 'videoContainer', options);
79        
80        player.setVolume(1);
81        player.play();
82
83        player.on('loaded', function() {
84            document.getElementById('closeLightbox').style.display = 'block';
85        });
86
87    }
88   
89}
90
91// Function to close the lightbox
92function closeLightbox() {
93    document.getElementById('lightbox-card').style.display = 'none';
94
95    // Remove the Vimeo player when the lightbox is closed
96    const videoContainer = document.getElementById('videoContainer');
97    videoContainer.innerHTML = ''; // Clear the content;
98    videoContainer.remove(); // Remove element
99}
100
101const elements = document.querySelectorAll('.openLightbox');
102
103elements.forEach(element => {
104    element.addEventListener('click', () => {
105      const dataAttribute = element.getAttribute('data-vimeo');
106      const dataContainer = element.getAttribute('data-container');
107      const dataHeight = element.getAttribute('data-height');
108      if (dataContainer) {
109        document.getElementById(dataContainer).innerHTML = ''
110        openLightbox(dataAttribute, dataContainer, dataHeight);
111      } else {
112        openLightbox(dataAttribute);
113      }
114    });
115});
116
117document.getElementById('closeLightbox').addEventListener('click', closeLightbox);