Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Frnt-End/React-Responsive-Video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

30 Commits

Repository files navigation

Full Screen Responsive Video in React.js

Simple and fast way to make a background video in React :point_right: Watch DEMO

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 <video> html tag:

<video autoPlay loop muted className="bg-vid"><source src={BgVideo} type="video/mp4" /> </video>

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.. πŸ—½

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

License

Copyright Β© 2015 @frnt-end nirit.website

License

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /