Refactor hero video

- Update fallback text content
- Improve play/pause button appearance

Author: NicolaSaunders

assets-src/styles/sass/50-core-components/_hero.scss

@@ -55,7 +55,21 @@
 }
 
 .hero .button {
+	align-items: center;
 	align-self: flex-start;
+	display: inline-flex;
+	justify-content: center;
+}
+
+
+.hero--video .sidebar__video {
+	margin-inline: auto;
+	max-inline-size: rem(500);
+	position: relative;
+}
+
+.hero--video video {
+	display: block;
 }
 
 .hero--listing {

assets-src/styles/sass/60-advanced-components/_hero.scss

@@ -8,30 +8,27 @@
 	}
 }
 
-.js .hero video {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
-  
-@media screen and (min-width: 48em) {
-	.js .hero video {
-		max-width: 31.25rem;
-	}
+
+
+
+.js .hero--video [data-video-control="hero"] {
+	margin-block-start: 1rem;
 }
 
-[data-video-control="hero"] > * {
+.js .hero--video [data-video-control="hero"] > * {
 	pointer-events: none;
 }
 
-[data-video-control="hero"] .pause-icon {
+.js .hero--video [data-video-control="hero"] .pause-icon {
 	display: none;
 }
 
-[data-video-control="hero"].js-play-video .pause-icon {
-	display: block;
-}
+.js .hero--video [data-video-control="hero"].js-play-video {
+	.pause-icon {
+		display: block;
+	}
 
-[data-video-control="hero"].js-play-video .play-icon {
-	display: none;
+	.play-icon {
+		display: none;
+	}
 }

templates/components/styles/hero.html.twig

@@ -1,4 +1,4 @@
-<div class="u-full-width hero">
+<div class="u-full-width hero {% if page.heroVideo is defined and page.heroVideo %}hero--video{% endif %}">
     <div class="l-center">
         <div class="l-sidebar">
             <div>
@@ -13,23 +13,21 @@
                 </div>
                 {% if page.heroVideo is defined and page.heroVideo %}
                     <div class="sidebar">
-                        <div class="l-frame l-frame--16-9">
-                            <video controls loop muted playsinline preload="metadata" data-video="hero">
-                                <source src="{{ page.heroVideo[0].url }}" type="video/mp4">
-                                Sorry, your browser does not support embedded videos. This is an animation of the W3C logo morphing into a new design.
-                            </video>
+                        <div class="sidebar__video">
+                            <div class="l-frame l-frame--16-9">
+                                <video controls loop muted playsinline preload="metadata" data-video="hero">
+                                    <source src="{{ page.heroVideo[0].url }}" type="video/mp4">
+                                    Sorry, your browser does not support embedded videos. Here is a <a href="{{ page.heroVideo[0].url }}">link to the video</a> instead.
+                                </video>
+                            </div>
+                            <button class="button" data-video-control="hero" hidden>
+                                <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"/>
+                                    <path class=pause-icon d="M176 96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h64c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48h-64zm224 0c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h64c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48h-64z"/></svg>
+                                <span class="visuallyhidden">Play</span>
+                            </button>
                         </div>
-                        <button class="button" data-video-control="hero" hidden>
-                            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 47 47" height="45" width="45" aria-hidden="true" focusable="false">
-                                <defs/>
-                                <g fill="none" fill-rule="evenodd">
-                                    <path fill="#1E3773" fill-rule="nonzero" stroke="#FFF" stroke-opacity=".8" stroke-width="3.75" d="M23.914 2.818a21.222 21.222 0 0114.937 6.108c3.813 3.762 6.173 8.956 6.173 14.695 0 4.204-1.286 8.201-3.555 11.55a21.036 21.036 0 01-9.48 7.668 21.405 21.405 0 01-12.222 1.183 21.205 21.205 0 01-10.82-5.706 20.685 20.685 0 01-5.77-10.65 20.489 20.489 0 011.206-12.008 20.855 20.855 0 017.78-9.335 21.335 21.335 0 0111.751-3.505z" opacity=".8"/>
-                                    <path class="play-icon" fill="#FFF" fill-rule="nonzero" d="M20.065 31.18l12.748-7.57-12.748-7.548z"/>
-                                    <path class="pause-icon" fill="#FFF" d="M26.232 16.062h5v15h-5zM16.232 16.062h5v15h-5z"/>
-                                </g>
-                            </svg>
-                            <span class="visuallyhidden">Play</span>
-                        </button>
                     </div>
                 {% elseif page.heroIllustration is defined and page.heroIllustration %}
                     <div class="sidebar">