video

React project that demonstrates using a YouTube video as a background cover

Aug 10, 2021
React project that demonstrates using a YouTube video as a background cover

Video Background

React project that demonstrates using a YouTube video as a background cover.

sample

View Demo View Github

What is it?

This is a sample project intended to demonstrate how to
overlay a YouTube video as a background cover.

Why build it?

Wanted to show that achieving this video effect isn't hard, and anyone can do it by following a simple example.

How does it work?

The following CSS styles position the YouTube video frame as a background overlay.

:root { --video-width: 100vw; --video-height: 100vh; } @media (min-aspect-ratio: 16/9) { :root { --video-height: 56.25vw; } } @media (max-aspect-ratio: 16/9) { :root { --video-width: 177.78vh; } } .video-background { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .video-background iframe { position: absolute; top: 50%; left: 50%; width: var(--video-width); height: var(--video-height); transform: translate(-50%, -50%); }

How to get it?

Clone and run it locally.

git clone https://github.com/reactgular/video-background cd video-background yarn install yarn start
Recommended