46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
export default function VimeoBackground({ videoId = "1066622045", opacity = 0.5 }) {
|
|
const params = new URLSearchParams({
|
|
background: "1",
|
|
muted: "1",
|
|
autoplay: "1",
|
|
autopause: "0",
|
|
controls: "0",
|
|
loop: "1",
|
|
dnt: "1",
|
|
playsinline: "1",
|
|
app_id: "122963",
|
|
}).toString();
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100vw",
|
|
height: "100vh",
|
|
zIndex: -1,
|
|
overflow: "hidden",
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
<iframe
|
|
src={`https://player.vimeo.com/video/${videoId}?${params}`}
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "50%",
|
|
width: "177.78vh", // 100vh * 16 / 9
|
|
height: "100vh",
|
|
transform: "translate(-50%, -50%)",
|
|
opacity,
|
|
border: "none",
|
|
}}
|
|
allow="autoplay; fullscreen; picture-in-picture"
|
|
frameBorder="0"
|
|
allowFullScreen
|
|
title="Vimeo Background Video"
|
|
/>
|
|
</div>
|
|
);
|
|
} |