Make play/pause button text use translatable strings

Author: NicolaSaunders

assets-src/js/main/video-hero.js

@@ -13,7 +13,7 @@ let videoHero = function () {
 
     // Helper to update button text
     function updateButtonState(isPlaying) {
-        const label = isPlaying ? "Pause" : "Play";
+        const label = isPlaying ? heroVidControl.dataset.videoPause : heroVidControl.dataset.videoPlay;
         heroVidControl.querySelector("span").innerText = label;
         heroVidControl.classList.toggle("js-play-video", isPlaying);
     }

templates/components/styles/hero.html.twig

@@ -20,7 +20,7 @@
                                     {{ 'components.hero.video.not_supported'|trans({video_url: page.heroVideo[0].url}, 'w3c_website_templates_bundle') }}
                                 </video>
                             </div>
-                            <button class="button" data-video-control="hero" hidden>
+                            <button class="button" hidden data-video-control="hero" data-video-play="{{ 'components.hero.video.play'|trans({}, 'w3c_website_templates_bundle') }}" data-video-pause="{{ 'components.hero.video.pause'|trans({}, 'w3c_website_templates_bundle') }}">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 640" height="20" width="20" aria-hidden="true" focusable="false">
                                     <!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                     <path class="play-icon" d="M187.2 100.9c-12.4-6.8-27.4-6.5-39.6.7-12.2 7.2-19.6 20.3-19.6 34.4v368c0 14.1 7.5 27.2 19.6 34.4 12.1 7.2 27.2 7.5 39.6.7l336-184c12.8-7 20.8-20.5 20.8-35.1 0-14.6-8-28.1-20.8-35.1l-336-184z"/>