diff --git a/cigaradvisor/blocks/video/video.css b/cigaradvisor/blocks/video/video.css new file mode 100644 index 00000000..c5f1d524 --- /dev/null +++ b/cigaradvisor/blocks/video/video.css @@ -0,0 +1,79 @@ +.video { + width: unset; + text-align: center; + max-width: 1020px; + margin: auto; +} + +.video.lazy-loading { + /* reserve an approximate space to avoid extensive layout shifts */ + aspect-ratio: 16 / 9; +} + +.video > div { + display: flex; + justify-content: center; +} + +.video video { + max-width: 100%; +} + +.video video[data-loading] { + /* reserve an approximate space to avoid extensive layout shifts */ + width: 100%; + aspect-ratio: 16 / 9; +} + +.video .video-placeholder { + width: 100%; + aspect-ratio: 16 / 9; + position: relative; +} + +.video .video-placeholder > * { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset: 0; +} + +.video .video-placeholder picture img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.video .video-placeholder-play button { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(3); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 20px; + padding: 0; +} + +.video .video-placeholder-play button::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 6px solid; + top: 4px; + left: 7px; +} + +@media print, screen and (max-width: 960px) { + .video { + max-width: 780px; + margin: auto 20px; + } +} diff --git a/cigaradvisor/blocks/video/video.js b/cigaradvisor/blocks/video/video.js new file mode 100644 index 00000000..19712695 --- /dev/null +++ b/cigaradvisor/blocks/video/video.js @@ -0,0 +1,94 @@ +/* +* Video Block +* Show a video referenced by a link +* https://www.hlx.live/developer/block-collection/video +*/ + +function embedYoutube(url, autoplay) { + const usp = new URLSearchParams(url.search); + const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : ''; + const embed = url.pathname; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + return `