diff --git a/blocks/video/video.js b/blocks/video/video.js index debe3659..c9784d42 100644 --- a/blocks/video/video.js +++ b/blocks/video/video.js @@ -4,37 +4,71 @@ * https://www.hlx.live/developer/block-collection/video */ -function embedYoutube(url, autoplay) { +function embedYoutube(url, replacePlaceholder, autoplay) { const usp = new URLSearchParams(url.search); - const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let suffix = ''; + if (replacePlaceholder || autoplay) { + const suffixParams = { + autoplay: '1', + mute: autoplay ? '1' : '0', + controls: autoplay ? '0' : '1', + disablekb: autoplay ? '1' : '0', + loop: autoplay ? '1' : '0', + playsinline: autoplay ? '1' : '0', + }; + suffix = `&${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`; + } let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : ''; const embed = url.pathname; if (url.origin.includes('youtu.be')) { [, vid] = url.pathname.split('/'); } - return `
+ + const temp = document.createElement('div'); + temp.innerHTML = `
`; + return temp.children.item(0); } -function embedVimeo(url, autoplay) { +function embedVimeo(url, replacePlaceholder, autoplay) { const [, video] = url.pathname.split('/'); - const suffix = autoplay ? '?muted=1&autoplay=1' : ''; - return `
+ let suffix = ''; + if (replacePlaceholder || autoplay) { + const suffixParams = { + autoplay: '1', + background: autoplay ? '1' : '0', + }; + suffix = `?${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`; + } + const temp = document.createElement('div'); + temp.innerHTML = `
`; + return temp.children.item(0); } -function getVideoElement(source, autoplay) { +function getVideoElement(source, replacePlaceholder, autoplay) { const video = document.createElement('video'); video.setAttribute('controls', ''); video.dataset.loading = 'true'; video.addEventListener('loadedmetadata', () => delete video.dataset.loading); - if (autoplay) video.setAttribute('autoplay', ''); + if (autoplay || replacePlaceholder) { + video.setAttribute('autoplay', ''); + if (autoplay) { + video.setAttribute('loop', ''); + video.setAttribute('playsinline', ''); + video.removeAttribute('controls'); + video.addEventListener('canplay', () => { + video.muted = true; + video.play(); + }); + } + } const sourceEl = document.createElement('source'); sourceEl.setAttribute('src', source); @@ -44,7 +78,7 @@ function getVideoElement(source, autoplay) { return video; } -const loadVideoEmbed = (block, link, autoplay) => { +const loadVideoEmbed = (block, link, replacePlaceholder, autoplay) => { if (block.dataset.embedIsLoaded) { return; } @@ -54,14 +88,15 @@ const loadVideoEmbed = (block, link, autoplay) => { const isVimeo = link.includes('vimeo'); const isMp4 = link.includes('.mp4'); + let embedEl; if (isYoutube) { - block.innerHTML = embedYoutube(url, autoplay); + embedEl = embedYoutube(url, replacePlaceholder, autoplay); } else if (isVimeo) { - block.innerHTML = embedVimeo(url, autoplay); + embedEl = embedVimeo(url, replacePlaceholder, autoplay); } else if (isMp4) { - block.textContent = ''; - block.append(getVideoElement(link, autoplay)); + embedEl = getVideoElement(link, replacePlaceholder, autoplay); } + block.replaceChildren(embedEl); block.dataset.embedIsLoaded = true; }; @@ -77,7 +112,7 @@ export default async function decorate(block) { wrapper.innerHTML = '
'; wrapper.prepend(placeholder); wrapper.addEventListener('click', () => { - loadVideoEmbed(block, link, true); + loadVideoEmbed(block, link, true, false); }); block.append(wrapper); } else { @@ -85,7 +120,7 @@ export default async function decorate(block) { const observer = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) { observer.disconnect(); - loadVideoEmbed(block, link, false); + loadVideoEmbed(block, link, false, block.classList.contains('autoplay')); block.classList.remove('lazy-loading'); } });