Best practice to embed Vimeo video in Nextjs or Reactjs - reactjs

Question

I'm making a website with Next.js and wanting to embed vimeo videos and wondering what is the most common practice to do it.
I've tried regular iframe, react-player, #u-wave/react-vimeo.
I realized #u-wave/react-vimeo gives me 410 error sometimes when I leave the page open long and react-player when it loads it flickers a bit (small first and then it gets bigger to its size) :(
410 error I get on #u-wave/react-vimeo:
Thank you

Answer 1

This is how I have implemented Vimeo player:
import React, { useRef, useState} from "react";
import styled from "styled-components";
import { Play } from "phosphor-react";
import ReactPlayer from "react-player/lazy";
import styles from "./styles.module.scss";
export default function VideoPlayer() {
const playerRef = useRef()
return (
<div className={styles.playerWrapper}>
<ReactPlayer
id="MyId"
className={styles.reactPlayer}
width="100%"
height="100%"
controls
playing
light="img/main-page/image.webp"
playIcon={
<Btn
className={styles.btnSmall}
bgColor="var(--ifm-btn-primary)"
textColor="var(--ifm-text-black)"
borderRadius={40}
fontSize={20}
px={25}
py={25}
style={{
maxWidth: 361,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: 10
}}
>
<Play weight="fill" color="--ifm-text-black" size={24} />
</Btn>
}
url="https://vimeo.com/yourid"
></ReactPlayer>
</div>
);
}
//styles.module.css
.playerWrapper {
position: relative;
padding-top: 56.25%;
/* Player ratio: 100 / (1280 / 720) */
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.7);
border-radius: 20px;
margin-top: 92px;
margin-bottom: 21px;
}
.reactPlayer {
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
overflow: hidden;
}
.btnSs {
max-width: 361px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10;
}
#media(max-width: 768px) {
.btnSmall {
width: 150px !important;
font-size: 13px !important;
padding: 4px 10px !important;
gap: 0px !important;
}
}
#media(max-width: 451px){
.playerWrapper {
margin-bottom: 0px;
}
}