`;
+ 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');
}
});