How to create Background VIdeo with cloudinary-react

Asked Apr 25 '22 at 10:27

Active Apr 25 '22 at 10:27

Viewed 213 times

Any idea how i can create a Background Video (100vh, 100vw) using cloudinary-react?

Here is my Video Component:

import { useRef } from 'react'
import { Video, CloudinaryContext, Transformation } from 'cloudinary-react'

const VideoPlayer = () => {
  const videoRef = useRef()
  return (
    <CloudinaryContext cloud_name="joinshelf">
      <div className="h-screen w-screen">
        <Video publicId="luciana_e1vp7u" innerRef={videoRef}>
          <Transformation
            audioCodec="none"
            height="480"
            quality="auto"
            videoCodec="auto"
            width="852"
            crop="fill"
          />
        </Video>
      </div>
    </CloudinaryContext>
  )
}
export default VideoPlayer

If that not possible, any idea how to render a 11MB Video fast? Right now it just a file in the public folder and im using Vercel for hosting

Thanks for the Helpers!

asked Apr 25 '22 at 10:27

Naveh Mevorach

In the server, before sending a response you can zip the video file then download it to the client then unzip and use it. – Balagoni Harish Apr 25 '22 at 10:42
How can I do it? do you have a recommended libarary? – Naveh Mevorach Apr 25 '22 at 10:45
https://stackoverflow.com/questions/3894794/node-js-gzip-compression – Balagoni Harish Apr 25 '22 at 10:48
1

Yeah but it require backend code lol. – Naveh Mevorach Apr 25 '22 at 10:55
You will need to specify the vw in your CSS, something like https://css-tricks.com/full-page-background-video-styles/ – Tom Apr 25 '22 at 16:49
server in the sense backend only. – Balagoni Harish Apr 26 '22 at 05:11

How to create Background VIdeo with cloudinary-react

0 Answers0