diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.css b/cigars-for-beginners/blocks/video-summary/video-summary.css index ad442e1..dd178c9 100644 --- a/cigars-for-beginners/blocks/video-summary/video-summary.css +++ b/cigars-for-beginners/blocks/video-summary/video-summary.css @@ -7,6 +7,37 @@ aspect-ratio: 16 / 9; } +.video-summary .video-summary-embed-facade { + position: relative; + max-width: 820px; + margin: 0 auto; + cursor: pointer; +} + +.video-summary .video-summary-embed-title { + position: absolute; + top: 0; + color: #fff; + margin: 0 auto; + padding: 0.5em; + text-shadow: 2px 2px black; + font-size: var(--body-font-size-m); + background: #00000075; +} + +.video-summary .video-summary-embed-facade::after { + content: url('/cigars-for-beginners/icons/play.png'); + position: absolute; + display: block; + z-index: 1; + width: 60px; + height: 60px; + margin: 0 auto; + inset: 50% 0 0; + transform: translateY(-50%); + filter: drop-shadow(2px 4px 6px black); +} + .video-summary > div > div:last-child { text-align: center; } @@ -52,3 +83,9 @@ visibility: visible; max-height: 500px; } + +@media (max-width: 600px) { + .video-summary-embed-title { + font-size: 0.8em; + } +} diff --git a/cigars-for-beginners/blocks/video-summary/video-summary.js b/cigars-for-beginners/blocks/video-summary/video-summary.js index cf8579e..84ce814 100644 --- a/cigars-for-beginners/blocks/video-summary/video-summary.js +++ b/cigars-for-beginners/blocks/video-summary/video-summary.js @@ -5,8 +5,12 @@ */ function getEmbed(url) { const frame = document.createElement('iframe'); + + const frameUrl = new URL(url); + frameUrl.searchParams.append('autoplay', 1); + frame.className = 'video-summary-embed'; - frame.src = url; + frame.src = frameUrl.toString(); frame.allow = 'autoplay; fullscreen; picture-in-picture'; frame.allowFullscreen = true; @@ -34,9 +38,23 @@ function getShowHide() { export default async function decorate(block) { const url = block.querySelector('a'); - const embed = getEmbed(url); - url.parentElement.replaceWith(embed); - const description = block.querySelector('div > div:last-child p'); + const title = block.querySelector('h3'); + title.className = 'video-summary-embed-title'; + + const img = block.querySelector('img'); + img.className = 'video-summary-embed'; + + const facadeWrap = title.parentElement; + facadeWrap.className = 'video-summary-embed-facade'; + facadeWrap.addEventListener('click', () => { + const embed = getEmbed(url.innerText); + facadeWrap.replaceWith(embed); + title.remove(); + }); + + url.remove(); + + const description = block.querySelector(':scope > div > div:last-child p'); description.parentElement.prepend(getShowHide()); }