Skip to content

Instantly share code, notes, and snippets.

@kiritocode1

kiritocode1/youtube-video-efffect.tsx

Last active September 15, 2024 06:03
Show Gist options
  • Save kiritocode1/3ccfff19360215873f71fc3c91559ae9 to your computer and use it in GitHub Desktop.
Save kiritocode1/3ccfff19360215873f71fc3c91559ae9 to your computer and use it in GitHub Desktop.
Download ZIP
replicating youtube effect in a speedrun : 2 hrs
Raw
youtube-video-efffect.tsx
"use client"
import { FC, useEffect , useRef} from 'react'
interface pageProps {
}
const Page: FC<pageProps> = ({ }) => {
return (
<div className="flex min-h-screen bg-black relative items-center justify-center min-w-full">
<video
className="w-[600px] max-w-full h-auto absolute z-20 translate-x-1/2 translate-y-[60%] scale-[1.5_1.3] rounded-[30%] blur-[100px] saturate-200 opacity-50"
autoPlay
loop
muted
playsInline
id="videoGojo"
>
<source
src="/videos/gojo.mp4"
type="video/mp4"
/>
</video>
{/* copy above code and paste below code */}
<video
className="w-[600px] max-w-full h-auto absolute z-30 "
autoPlay
loop
muted
playsInline
id="videoGojo"
>
<source
src="/videos/gojo.mp4"
type="video/mp4"
/>
</video>
</div>
);
}
export default Page
@kiritocode1
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment