Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
To make a video appear in the background of a page and to make that take the entire screen size.
<!-- Video background -->
<div class="row" id="bgvid">
<video controls width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted">
<source src="rain.mp4" type="video/mp4">
Rainfall
</video>
</div>
<!-- Video background ends-->
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.