Here is a method to have a video autoplay and loop in the background of a webpage. The CSS has focus on it being somewhat responsive, With a framework like Bootstrap or Bulma you could achieve this easily.
Remember not to make the video file large and that it loops cleanly.
CSS:
body, html {
height: 100%;
}
#Container {
width: 100%;
height: 100%;
overflow: hidden;
}
#Container video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
#Container div {
z-index: 1;
} HTML:
A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Some early September spring shots from a bushwalk, It is still too early for wildflowers.
I recently needed to clone over a smaller NVMe to a 2TB SK Hynix Platinum…
If you ever needed a simple solution in Laravel to delete an entire directory and…
How to enforce only one user to register or be registered in a Laravel web…