diff --git a/eds/blocks/columns/columns.css b/eds/blocks/columns/columns.css index 49b0dc90..38500acd 100644 --- a/eds/blocks/columns/columns.css +++ b/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); } diff --git a/eds/blocks/columns/columns.js b/eds/blocks/columns/columns.js index 33569727..b8b1b79c 100644 --- a/eds/blocks/columns/columns.js +++ b/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); + } }); }); }