CODEWITHSUNDEEP
javascripthtmlreactjs
BenjaminK
BenjaminK

Reputation: 783

How to make a full frame background video with react-vimeo or react-player?

I'm working with videos hosted on Vimeo and want to make them a full frame background video without any player controls visible, autoplay and loop. I instantly got it working with a normal HTML video element, but with the two options as npm packages, I can't get them to fit the browser width and height. Especially when making it very small in the width. I initially used object-fit: fill which doesn't seem to doesn't work. I guess because it's an iFrame.

Here I build a sample sandbox to make it easier to test: https://codesandbox.io/s/naughty-fermat-zpchdo?file=/src/App.js:86-97

App.js

import "./styles.css";

import { useState } from "react";

import Vimeo from "@u-wave/react-vimeo";

export default function App() {
  const [isVimeoSource, setIsVimeoSource] = useState(false);

  return (
    <div className="full-screen-container">
      <div className="label-text">
        {isVimeoSource ? "Vimeo iFrame" : "HTML Video Element"}
      </div>
      <label class="switch">
        <input
          type="checkbox"
          onClick={() => setIsVimeoSource((prev) => !prev)}
        />
        <span class="slider round" />
      </label>

      {isVimeoSource ? (
        <Vimeo
          className="react-vimeo-player"
          video={"736830436"}
          // width={"100%"}
          //height={"100%"}
          autoplay={true}
          muted={true}
          loop={true}
          responsive={true}
          // controls={false}
          background={true}
        />
      ) : (
        <video className="full-screen-video" playsInline autoPlay muted loop>
          <source
            src={
              "https://res.cloudinary.com/dlf5gecrf/video/upload/v1658606508/benjaminkratzin-website/BenjaminKratzin_DirectorReel_220722_Desktop_858p_4Mbs_v01_g2ufkx.mp4"
            }
            type="video/mp4"
          />
        </video>
      )}
    </div>
  );
}

styles.css

.full-screen-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.full-screen-video {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  object-fit: cover;
  z-index: -1;
}

.react-vimeo-player {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  object-fit: cover;
  z-index: -1;
}

Upvotes: 2

Views: 1971

Answers (1)

jimmyNames
jimmyNames

Reputation: 162

Try adding

position: fixed; height: 100%; width: 100%;

to the iframe.

Upvotes: 1

Related Questions