blob: bd36eaa429b40170fe01e60fa160e9bc2b0e715e (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
/*
* SPDX-FileCopyrightText: 2024 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import { useState } from 'react';
import coverBackground from './cover-background.png?sizes[]=1920&sizes[]=1288&sizes[]=1108&&sizes[]=644&sizes[]=322&placeholder=true&rl';
import Cover from './cover.svg';
import styles from './index.module.css';
export default function Video() {
const [started, setStarted] = useState(false);
return (
<>
<h2 className="sr-only">Check out the intro video</h2>
<div className="container">
<div className={styles['video__container']}>
{started ? (
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
className={styles['video']}
/>
) : (
<button
type="button"
aria-label="Video introduction"
title="Play video (requires acceping cookies from YouTube)"
onClick={() => setStarted(true)}
className={styles['video__button']}
style={{
backgroundImage: `url("${coverBackground.placeholder}")`,
}}
>
<img
alt=""
src={coverBackground.src}
srcSet={coverBackground.srcSet}
width={coverBackground.width}
height={coverBackground.height}
sizes="(min-width: 1440px) 1288px, (min-width: 1140px) 1108px, calc(100vw - 32px)"
loading="lazy"
className={styles['video__image']}
/>
<div className={styles['video__svg']}>
<Cover />
</div>
</button>
)}
</div>
</div>
</>
);
}
|
