diff --git a/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_vimeo.js b/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_vimeo.js
index 7ae28021bc..e36237108b 100644
--- a/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_vimeo.js
+++ b/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);
     },
   };
diff --git a/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_youtube.js b/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_youtube.js
index bacdd26ca1..094aa0b3a0 100644
--- a/modules/custom/az_paragraphs/az_paragraphs_text_media/js/az_paragraphs_az_text_media_youtube.js
+++ b/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,6 +114,10 @@
           };
 
           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;
@@ -126,6 +125,7 @@
             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');
+              }
             }
           };
 
diff --git a/modules/custom/az_paragraphs/az_paragraphs_text_media/templates/media--az-remote-video--az-background.html.twig b/modules/custom/az_paragraphs/az_paragraphs_text_media/templates/media--az-remote-video--az-background.html.twig
index 9588142c1a..14372f8a28 100644
--- a/modules/custom/az_paragraphs/az_paragraphs_text_media/templates/media--az-remote-video--az-background.html.twig
+++ b/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>
diff --git a/modules/custom/az_paragraphs/css/az_paragraphs_az_text_media.css b/modules/custom/az_paragraphs/css/az_paragraphs_az_text_media.css
index 17698d1155..646157d1be 100644
--- a/modules/custom/az_paragraphs/css/az_paragraphs_az_text_media.css
+++ b/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;
 }