https://veja.abril.com.br/wp-content/themes/abril-master2/assets/js/block-with-video.js?ver=0298283839390303

1document.addEventListener("DOMContentLoaded", function () {
2    if (window.blockWithVideoInitialized) {
3        return;
4    }
5    window.blockWithVideoInitialized = true;
6
7    const allWrappers = document.querySelectorAll(".video-wrapper");
8    const allVideos = document.querySelectorAll(".custom-video");
9    allWrappers.forEach(wrapper => {
10        const video = wrapper.querySelector(".custom-video");
11        const playButton = wrapper.querySelector(".play-button");
12        const muteButton = wrapper.querySelector(".mute-button");
13        if (!video || !playButton || !muteButton) {
14            return;
15        }
16        const loopTime = parseInt(video.getAttribute("data-loop-time")) || 60;
17        wrapper.addEventListener("click", function (event) {
18            event.preventDefault();
19            event.stopPropagation();
20
21            if (video.paused) {
22                // Pause all other custom videos
23                allVideos.forEach(otherVideo => {
24                    if (otherVideo !== video) {
25                        otherVideo.pause();
26                        const otherWrapper = otherVideo.closest(".video-wrapper");
27                        if (otherWrapper) {
28                            const otherPlayButton = otherWrapper.querySelector(".play-button");
29                            if (otherPlayButton) {
30                                otherPlayButton.style.display = "block";
31                            }
32                        }
33                    }
34                });
35
36                // Pause YouTube players if they exist
37                if (typeof youtubePlayers !== 'undefined') {
38                    youtubePlayers.forEach(player => {
39                        if (player && typeof player.pauseVideo === 'function') {
40                            player.pauseVideo();
41                        }
42                    });
43                }
44
45                video.play();
46                playButton.style.display = "none";
47            } else {
48                video.pause();
49                playButton.style.display = "block";
50            }
51        });
52
53        video.addEventListener("pause", function () {
54            playButton.style.display = "block";
55        });
56        video.addEventListener("play", function () {
57            playButton.style.display = "none";
58        });
59
60        muteButton.addEventListener("click", function (event) {
61            event.stopPropagation(); // Prevent triggering play/pause
62            event.preventDefault();  // Prevent <a> navigation
63            if (video.muted) {
64                allVideos.forEach(otherVideo => {
65                    if (otherVideo !== video) {
66                        otherVideo.muted = true; 
67                        const otherWrapper = otherVideo.closest(".video-wrapper");
68                        if (otherWrapper) {
69                            const otherMuteButton = otherWrapper.querySelector(".mute-button");
70                            if (otherMuteButton) {
71                                otherMuteButton.classList.remove("unmute");
72                            }
73                        }
74                    }
75                });
76
77                if (typeof youtubePlayers !== 'undefined') {
78                    youtubePlayers.forEach(player => {
79                        if (player && typeof player.pauseVideo === 'function') {
80                            player.pauseVideo();
81                        }
82                    });
83                }
84                video.muted = false;
85                muteButton.classList.add("unmute");
86            } else {
87                video.muted = true;
88                muteButton.classList.remove("unmute");
89            }
90        });
91
92        video.addEventListener("timeupdate", function () {
93            if (video.currentTime >= loopTime) {
94                video.currentTime = 0; // Restart video
95                video.play();
96            }
97        });
98    });
99
100    if (document.querySelector('iframe[src*="youtube.com/embed/"]')) {
101        var tag = document.createElement('script');
102        tag.src = "https://www.youtube.com/iframe_api";
103        tag.defer = true;
104        document.head.appendChild(tag);
105    }
106});
107
108var youtubePlayers = youtubePlayers || [];
109function onYouTubeIframeAPIReady() {
110    const iframes = document.querySelectorAll('iframe[src*="youtube.com/embed/"]');	

111    iframes.forEach(function (iframe, index) {
112        // Ensure each iframe has a unique ID
113        let iframeId = iframe.getAttribute('id');
114        if (!iframeId) {
115        iframeId = 'youtube-player-' + index;
116        iframe.setAttribute('id', iframeId);
117        }
118
119        const player = new YT.Player(iframeId, {
120        events: {
121            'onStateChange': onPlayerStateChange
122        }
123        });
124
125        youtubePlayers.push(player);
126    });
127}
128
129function onPlayerStateChange(event) {
130    if (event.data === YT.PlayerState.PLAYING) {
131        const currentPlayer = event.target;
132        const currentIframe = typeof currentPlayer.getIframe === 'function' ? currentPlayer.getIframe() : null;
133        youtubePlayers.forEach(function (player) {
134            const playerIframe = typeof player.getIframe === 'function' ? player.getIframe() : null;
135            if (playerIframe && currentIframe && playerIframe !== currentIframe) {
136                if (typeof player.pauseVideo === 'function') {
137                    player.pauseVideo(); 
138                }
139            }
140        });
141
142        const allVideos = document.querySelectorAll('.custom-video');
143        allVideos.forEach(function (video) {
144            video.pause();
145            video.muted = true;
146            const vidWrapper = video.closest(".video-wrapper");
147            if (vidWrapper) {
148                const vidMuteButton = vidWrapper.querySelector(".mute-button");
149                if (vidMuteButton) {
150                    vidMuteButton.classList.remove("unmute");
151                }
152                const vidPlayButton = vidWrapper.querySelector(".play-button");
153                if (vidPlayButton) {
154                    vidPlayButton.style.display = "block";
155                }
156            }
157        });
158    }
159}