https://github.com/frnt-end/react-responsive-video
⚛️ React Project - How to create Full screen & responsive video background in REACT - How to guide tutorial 👉 https://frnt-end.github.io/React-Responsive-Video/
https://github.com/frnt-end/react-responsive-video
background css css3 easy engineer frontend fullscreen how-to html html5 mp4-video object-fit react reactjs responsive simple tag tutorial video
Last synced: 5 months ago
JSON representation
⚛️ React Project - How to create Full screen & responsive video background in REACT - How to guide tutorial 👉 https://frnt-end.github.io/React-Responsive-Video/
- Host: GitHub
- URL: https://github.com/frnt-end/react-responsive-video
- Owner: Frnt-End
- Created: 2021-05-23T09:06:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-07T16:43:54.000Z (over 4 years ago)
- Last Synced: 2025-04-08T08:57:56.411Z (10 months ago)
- Topics: background, css, css3, easy, engineer, frontend, fullscreen, how-to, html, html5, mp4-video, object-fit, react, reactjs, responsive, simple, tag, tutorial, video
- Language: CSS
- Homepage: https://frnt-end.github.io/React-Responsive-Video/
- Size: 14.5 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full Screen Responsive Video in React.js
Simple and fast way to make a background video in React
:point_right: [Watch DEMO](https://frnt-end.github.io/React-Responsive-Video/)
## Start
Add your video file and import it, in this case, we added a file named 'vid-bg.mp4' inside a directory called 'video':
##### `import BgVideo from './video/vid-bg.mp4';`
Now we will embed the video using the `` html tag:
##### ` `
## Finish
Our last step is setting the **CSS style**:
##### `.bg-vid { position: fixed; width: 100%; height: 100%; object-fit: cover; z-index: 0; }`
***
##### And that's it! no third party and no packages.. :statue_of_liberty:
***
### Learn More
In this little project, we customized the video to play automatically, in a loop and without sound. for further customization and more information, visit: [w3-tag-video](https://www.w3schools.com/tags/tag_video.asp)
### License
Copyright © 2015 @frnt-end
[nirit.website](https:///nirit.website)
[](https://opensource.org/licenses/Apache-2.0)