Media Split Style Play Button

eds/blocks/columns/columns.css

@@ -51,6 +51,20 @@
   justify-content: center;
 }
 
+.columns .play-button {
+  align-items: center;
+  display: flex;
+  inset-block-start: calc(50% - 25px);
+  inset-inline-end: calc(50% - 25px);
+  justify-content: center;
+  position: absolute;
+}
+
+.columns .video-link {
+  display: block;
+  position: relative;
+}
+
 .columns.media-split > div > .columns-img-col img {
   padding-inline: var(--space-6);
 }

eds/blocks/columns/columns.js

@@ -56,6 +56,27 @@ export default function decorate(block) {
       if (p?.querySelector('picture')) {
         p.classList.add('columns-p');
       }
+
+      // decorate play button
+      const vidURL = col.querySelector('a[href*="mediaspace"]', 'a[href*="youtube"]', 'a[href*="video"]');
+      const picture = col.querySelector('picture');
+      if (vidURL) {
+        vidURL.innerHTML = '';
+        vidURL.appendChild(picture);
+        const playButton = calciteButton({
+          class: 'play-button',
+          'icon-start': 'play-f',
+          label: 'play video',
+          'aria-hidden': 'false',
+          'aria-label': 'play video',
+          appearance: 'solid',
+          kind: 'inverse',
+          scale: 'l',
+          round: '',
+        });
+
+        vidURL.appendChild(playButton);
+      }
     });
   });
 }