Closes #5490 Update text on media video play/pause buttons.

modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_vimeo.js

@@ -67,26 +67,6 @@
           }
         }
 
-        // Helper function for play button click
-        function handlePlayButtonClick(element, parentParagraph) {
-          return (event) => {
-            event.preventDefault();
-            element.player.play().catch((error) => vimeoError(error));
-            parentParagraph.classList.add('az-video-playing');
-            parentParagraph.classList.remove('az-video-paused');
-          };
-        }
-
-        // Helper function for pause button click
-        function handlePauseButtonClick(element, parentParagraph) {
-          return (event) => {
-            event.preventDefault();
-            element.player.pause().catch((error) => vimeoError(error));
-            parentParagraph.classList.add('az-video-paused');
-            parentParagraph.classList.remove('az-video-playing');
-          };
-        }
-
         // Helper function to initialize a single Vimeo element
         function initVimeoElement(element, defaultOptions) {
           const parentParagraph = element.parentNode;
@@ -105,29 +85,48 @@
             muted: defaultOptions.muted,
           });
 
-          // Event listener for starting play.
+          // Play/Pause button reference used by event handlers below.
+          const playPauseButton =
+            element.getElementsByClassName('az-video-playpause')[0];
+
+          // Update dimensions when buffering completes.
           element.player.on('bufferend', () => {
             setDimensions(element);
+          });
+
+          // Sync button and class state when video plays.
+          element.player.on('play', () => {
+            parentParagraph.classList.remove('az-video-paused');
             parentParagraph.classList.add('az-video-playing');
+            playPauseButton.textContent = 'Pause Video';
+            playPauseButton.setAttribute('aria-pressed', 'true');
           });
 
-          // Play Button
-          const playButtons = element.getElementsByClassName('az-video-play');
-          if (playButtons[0]) {
-            playButtons[0].addEventListener(
-              'click',
-              handlePlayButtonClick(element, parentParagraph),
-            );
-          }
+          // Sync button and class state when video pauses.
+          element.player.on('pause', () => {
+            parentParagraph.classList.remove('az-video-playing');
+            parentParagraph.classList.add('az-video-paused');
+            playPauseButton.textContent = 'Play Video';
+            playPauseButton.setAttribute('aria-pressed', 'false');
+          });
 
-          // Pause Button
-          const pauseButtons = element.getElementsByClassName('az-video-pause');
-          if (pauseButtons[0]) {
-            pauseButtons[0].addEventListener(
-              'click',
-              handlePauseButtonClick(element, parentParagraph),
-            );
-          }
+          // Set the iframe tabindex to -1 to prevent focus from reaching iframe.
+          element.player.ready().then(() => {
+            const iframe = element.player.element;
+            if (iframe) {
+              iframe.setAttribute('tabindex', '-1');
+            }
+          });
+
+          // Play/Pause button: delegate state changes to player events.
+          playPauseButton.addEventListener('click', (event) => {
+            event.preventDefault();
+            if (event.currentTarget.getAttribute('aria-pressed') === 'true') {
+              element.player.pause().catch((error) => vimeoError(error));
+            } else {
+              element.player.play().catch((error) => vimeoError(error));
+            }
+          });
         }
 
         // Helper function to handle API loaded callback
@@ -175,7 +174,6 @@
           });
         }
       }
-
       once('vimeoTextOnMedia-init', 'body').forEach(initVimeoBackgrounds);
     },
   };

modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_youtube.js

@@ -26,9 +26,6 @@
           );
           window.onYouTubeIframeAPIReady = () => {
             Array.from(bgVideoParagraphs).forEach((element) => {
-              const parentParagraph = document.getElementById(
-                element.dataset.parentid,
-              );
               const youtubeId = element.dataset.youtubeid;
               bgVideoSettings[youtubeId] = {
                 autoplay: element.dataset.autoplay === 'true',
@@ -54,21 +51,19 @@
                   onStateChange: window.onPlayerStateChange,
                 },
               });
-              const playButton =
-                element.getElementsByClassName('az-video-play')[0];
-              playButton.addEventListener('click', (event) => {
-                event.preventDefault();
-                element.player.playVideo();
-                parentParagraph.classList.remove('az-video-paused');
-                parentParagraph.classList.add('az-video-playing');
-              });
-              const pauseButton =
-                element.getElementsByClassName('az-video-pause')[0];
-              pauseButton.addEventListener('click', (event) => {
+
+              // Play/Pause button: delegate state changes to player events.
+              const playPauseButton =
+                element.getElementsByClassName('az-video-playpause')[0];
+              playPauseButton.addEventListener('click', (event) => {
                 event.preventDefault();
-                element.player.pauseVideo();
-                parentParagraph.classList.remove('az-video-playing');
-                parentParagraph.classList.add('az-video-paused');
+                if (
+                  event.currentTarget.getAttribute('aria-pressed') === 'true'
+                ) {
+                  element.player.pauseVideo();
+                } else {
+                  element.player.playVideo();
+                }
               });
             });
           };
@@ -119,13 +114,18 @@
           };
 
           window.onPlayerReady = (event) => {
+            // Set the iframe tabindex to -1 to prevent focus from reaching iframe.
+            const iframe = event.target.getIframe();
+            iframe.setAttribute('tabindex', '-1');
+
             const id = event.target.options.videoId;
             if (!bgVideoSettings[id].autoplay) {
               return;
             }
             if (defaultSettings.mute) {
               event.target.mute();
             }
+
             event.target.seekTo(bgVideoSettings[id].start);
             event.target.playVideo();
             // Create and dispatch a new event when video starts playing.
@@ -147,7 +147,24 @@
             if (event.data === 1) {
               resize();
               parentContainer.classList.add('az-video-playing');
+              parentContainer.classList.remove('az-video-paused');
               parentContainer.classList.remove('az-video-loading');
+              // Sync button state: video is confirmed playing.
+              const btn = parentContainer.querySelector('.az-video-playpause');
+              if (btn) {
+                btn.textContent = 'Pause Video';
+                btn.setAttribute('aria-pressed', 'true');
+              }
+            }
+            if (event.data === 2) {
+              // Video paused: sync button state.
+              parentContainer.classList.remove('az-video-playing');
+              parentContainer.classList.add('az-video-paused');
+              const btn = parentContainer.querySelector('.az-video-playpause');
+              if (btn) {
+                btn.textContent = 'Play Video';
+                btn.setAttribute('aria-pressed', 'false');
+              }
             }
           };
 

modules/custom/az_paragraphs/az_paragraphs_text_media/templates/media--az-remote-video--az-background.html.twig

@@ -13,5 +13,4 @@
 <div class="az-video-container">
   <div class="az-video-player"></div>
 </div>
-<div class="bg-video-player-control btn btn-light az-video-pause video-pause" title="Pause the Video" aria-hidden="">Pause Video</div>
-<div class="bg-video-player-control btn btn-light az-video-play video-play" title="Play the video" aria-hidden="">Play Video</div>
+<button type="button" class="bg-video-player-control btn btn-light az-video-playpause video-playpause" aria-pressed="false">Play Video</button>

modules/custom/az_paragraphs/css/az_paragraphs_az_text_media.css

@@ -49,7 +49,6 @@
   right: 0;
   font-size: 0.9em;
   color: #0c234b;
-  z-index: -102;
   cursor: pointer;
   padding: 0.3em 0.6em;
   border: none;
@@ -60,12 +59,6 @@
   color: #ab0520;
   border-color: #ab0520;
 }
-.az-video-playing .az-video-pause {
-  z-index: 2;
-}
-.az-video-paused .az-video-play {
-  z-index: 2;
-}
 .az-video-container iframe {
   position: absolute;
 }