Skip to content

Commit 9f88869

Browse files
wildonewildone
committed
update video component.
1 parent 1d3a117 commit 9f88869

File tree

3 files changed

+108
-57
lines changed

3 files changed

+108
-57
lines changed

‎blocks/video/video.css

+23-24
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
.video {
2-
width: unset;
32
text-align: center;
4-
max-width: 800px;
5-
margin: 32px auto;
3+
max-width: 900px;
4+
margin: 24px auto;
65
}
76

8-
.video.lazy-loading {
7+
.video[data-embed-loaded='false']:not(.placeholder) {
98
/* reserve an approximate space to avoid extensive layout shifts */
109
aspect-ratio: 16 / 9;
1110
}
@@ -19,12 +18,6 @@
1918
max-width: 100%;
2019
}
2120

22-
.video video[data-loading] {
23-
/* reserve an approximate space to avoid extensive layout shifts */
24-
width: 100%;
25-
aspect-ratio: 16 / 9;
26-
}
27-
2821
.video .video-placeholder {
2922
width: 100%;
3023
aspect-ratio: 16 / 9;
@@ -39,34 +32,40 @@
3932
inset: 0;
4033
}
4134

35+
.video[data-embed-loaded='true'] .video-placeholder,
36+
.video[data-embed-loaded='false'] .video-placeholder + * {
37+
visibility: hidden;
38+
height: 0;
39+
width: 0;
40+
}
41+
4242
.video .video-placeholder picture img {
4343
width: 100%;
4444
height: 100%;
4545
object-fit: cover;
4646
}
4747

4848
.video .video-placeholder-play button {
49-
box-sizing: border-box;
5049
position: relative;
5150
display: block;
52-
transform: scale(3);
53-
width: 22px;
54-
height: 22px;
55-
border: 2px solid;
56-
border-radius: 20px;
51+
width: 44px;
52+
height: 44px;
53+
border-radius: 50%;
54+
outline: 2px solid;
5755
padding: 0;
5856
}
5957

6058
.video .video-placeholder-play button::before {
61-
content: "";
59+
content: '';
6260
display: block;
6361
box-sizing: border-box;
6462
position: absolute;
6563
width: 0;
66-
height: 10px;
67-
border-top: 5px solid transparent;
68-
border-bottom: 5px solid transparent;
69-
border-left: 6px solid;
70-
top: 4px;
71-
left: 7px;
72-
}
64+
height: 24px;
65+
border-top: 12px solid transparent;
66+
border-bottom: 12px solid transparent;
67+
border-left: 18px solid;
68+
top: 50%;
69+
left: calc(50% + 2px);
70+
transform: translate(-50%, -50%);
71+
}

‎blocks/video/video.js

+84-32
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,69 @@
44
* https://www.hlx.live/developer/block-collection/video
55
*/
66

7-
function embedYoutube(url, autoplay) {
7+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
8+
9+
function embedYoutube(url, autoplay, background) {
810
const usp = new URLSearchParams(url.search);
9-
const suffix = autoplay ? '&muted=1&autoplay=1' : '';
11+
let suffix = '';
12+
if (background || autoplay) {
13+
const suffixParams = {
14+
autoplay: autoplay ? '1' : '0',
15+
mute: background ? '1' : '0',
16+
controls: background ? '0' : '1',
17+
disablekb: background ? '1' : '0',
18+
loop: background ? '1' : '0',
19+
playsinline: background ? '1' : '0',
20+
};
21+
suffix = `&${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
22+
}
1023
let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : '';
1124
const embed = url.pathname;
1225
if (url.origin.includes('youtu.be')) {
1326
[, vid] = url.pathname.split('/');
1427
}
15-
return `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
16-
<iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
28+
29+
const temp = document.createElement('div');
30+
temp.innerHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
31+
<iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
1732
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" title="Content from Youtube" loading="lazy"></iframe>
1833
</div>`;
34+
return temp.children.item(0);
1935
}
2036

21-
function embedVimeo(url, autoplay) {
37+
function embedVimeo(url, autoplay, background) {
2238
const [, video] = url.pathname.split('/');
23-
const suffix = autoplay ? '?muted=1&autoplay=1' : '';
24-
return `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
25-
<iframe src="https://player.vimeo.com/video/${video}${suffix}"
26-
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
27-
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
39+
let suffix = '';
40+
if (background || autoplay) {
41+
const suffixParams = {
42+
autoplay: autoplay ? '1' : '0',
43+
background: background ? '1' : '0',
44+
};
45+
suffix = `?${Object.entries(suffixParams).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')}`;
46+
}
47+
const temp = document.createElement('div');
48+
temp.innerHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
49+
<iframe src="https://player.vimeo.com/video/${video}${suffix}"
50+
style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
51+
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
2852
title="Content from Vimeo" loading="lazy"></iframe>
2953
</div>`;
54+
return temp.children.item(0);
3055
}
3156

32-
function getVideoElement(source, autoplay) {
57+
function getVideoElement(source, autoplay, background) {
3358
const video = document.createElement('video');
3459
video.setAttribute('controls', '');
35-
video.dataset.loading = 'true';
36-
video.addEventListener('loadedmetadata', () => delete video.dataset.loading);
3760
if (autoplay) video.setAttribute('autoplay', '');
61+
if (background) {
62+
video.setAttribute('loop', '');
63+
video.setAttribute('playsinline', '');
64+
video.removeAttribute('controls');
65+
video.addEventListener('canplay', () => {
66+
video.muted = true;
67+
if (autoplay) video.play();
68+
});
69+
}
3870

3971
const sourceEl = document.createElement('source');
4072
sourceEl.setAttribute('src', source);
@@ -44,49 +76,69 @@ function getVideoElement(source, autoplay) {
4476
return video;
4577
}
4678

47-
const loadVideoEmbed = (block, link, autoplay) => {
48-
if (block.dataset.embedIsLoaded) {
79+
const loadVideoEmbed = (block, link, autoplay, background) => {
80+
if (block.dataset.embedLoaded === 'true') {
4981
return;
5082
}
5183
const url = new URL(link);
5284

5385
const isYoutube = link.includes('youtube') || link.includes('youtu.be');
5486
const isVimeo = link.includes('vimeo');
55-
const isMp4 = link.includes('.mp4');
5687

5788
if (isYoutube) {
58-
block.innerHTML = embedYoutube(url, autoplay);
89+
const embedWrapper = embedYoutube(url, autoplay, background);
90+
block.append(embedWrapper);
91+
embedWrapper.querySelector('iframe').addEventListener('load', () => {
92+
block.dataset.embedLoaded = true;
93+
});
5994
} else if (isVimeo) {
60-
block.innerHTML = embedVimeo(url, autoplay);
61-
} else if (isMp4) {
62-
block.textContent = '';
63-
block.append(getVideoElement(link, autoplay));
95+
const embedWrapper = embedVimeo(url, autoplay, background);
96+
block.append(embedWrapper);
97+
embedWrapper.querySelector('iframe').addEventListener('load', () => {
98+
block.dataset.embedLoaded = true;
99+
});
100+
} else {
101+
const videoEl = getVideoElement(link, autoplay, background);
102+
block.append(videoEl);
103+
videoEl.addEventListener('canplay', () => {
104+
block.dataset.embedLoaded = true;
105+
});
64106
}
65-
66-
block.dataset.embedIsLoaded = true;
67107
};
68108

69109
export default async function decorate(block) {
110+
console.log('decorating video block');
70111
const placeholder = block.querySelector('picture');
71112
const link = block.querySelector('a').href;
72113
block.textContent = '';
114+
block.dataset.embedLoaded = false;
73115

116+
const autoplay = block.classList.contains('autoplay');
74117
if (placeholder) {
118+
block.classList.add('placeholder');
75119
const wrapper = document.createElement('div');
76120
wrapper.className = 'video-placeholder';
77-
wrapper.innerHTML = '<div class="video-placeholder-play"><button type="button" title="Play"></button></div>';
78-
wrapper.prepend(placeholder);
79-
wrapper.addEventListener('click', () => {
80-
loadVideoEmbed(block, link, true);
81-
});
121+
wrapper.append(placeholder);
122+
123+
if (!autoplay) {
124+
wrapper.insertAdjacentHTML(
125+
'beforeend',
126+
'<div class="video-placeholder-play"><button type="button" title="Play"></button></div>',
127+
);
128+
wrapper.addEventListener('click', () => {
129+
wrapper.remove();
130+
loadVideoEmbed(block, link, true, false);
131+
});
132+
}
82133
block.append(wrapper);
83-
} else {
84-
block.classList.add('lazy-loading');
134+
}
135+
136+
if (!placeholder || autoplay) {
85137
const observer = new IntersectionObserver((entries) => {
86138
if (entries.some((e) => e.isIntersecting)) {
87139
observer.disconnect();
88-
loadVideoEmbed(block, link, false);
89-
block.classList.remove('lazy-loading');
140+
const playOnLoad = autoplay && !prefersReducedMotion.matches;
141+
loadVideoEmbed(block, link, playOnLoad, autoplay);
90142
}
91143
});
92144
observer.observe(block);

‎component-definition.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@
191191
"page": {
192192
"resourceType": "core/franklin/components/block/v1/block",
193193
"template": {
194-
"name": "video",
194+
"name": "Video",
195195
"model": "video"
196196
}
197197
}

0 commit comments

Comments
 (0)