0

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: enter image description here

Thank you

MiMi
  • 85
  • 1
  • 2
  • 8

2 Answers2

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;
    }
}
Nightcrawler
  • 943
  • 1
  • 11
  • 32
0

The easiest solution:

  <div style={STYLES.videoIframeContainer}>
    <iframe
      title="vimeo-player"
      src={VIDEO_URL}
      width="640"
      height="360"
      frameborder="0"
      allowfullscreen
      style={STYLES.videoIframe}
    >
    </iframe>
  </div>

const STYLES = { videoIframeContainer: { padding: '56.25% 0 0 0', position: 'relative', }, videoIframe: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }

BetterForAll
  • 1