https://github.com/reactgular/video-background
React project that demonstrates using a YouTube video as a background cover.
https://github.com/reactgular/video-background
mockup reactjs youtube
Last synced: 3 months ago
JSON representation
React project that demonstrates using a YouTube video as a background cover.
- Host: GitHub
- URL: https://github.com/reactgular/video-background
- Owner: reactgular
- Created: 2021-07-23T12:14:05.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-23T12:38:24.000Z (about 4 years ago)
- Last Synced: 2025-05-12T20:17:37.777Z (5 months ago)
- Topics: mockup, reactjs, youtube
- Language: TypeScript
- Homepage: https://reactgular.github.io/video-background/
- Size: 10.6 MB
- Stars: 18
- Watchers: 0
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Video Background
## 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.
```css
: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.
```bash
git clone https://github.com/reactgular/video-background
cd video-background
yarn install
yarn start
```