Example of how to embed a video as the background of a page from a post.
This is Cricket…Cricket loves to sleep in weird positions.
The short video clip playing in the background of this page is one I had of Crick-Crickety-Cricketers the Cricketiest Kitty in the Mid-West. I was trying to get a picture of her sleeping in a crazy pose half way between the window sill and the headboard.
Soooooooo…….
In my mind it was a perfect clip to test this delicious little bit of CSS TrICKERY I will be incorporating in future posts and other projects perhaps.
Here’s The Code…
First The CSS
-----------------------------------------------------
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: #106899;
background-size: cover;
opacity:.5;
}
-----------------------------------------------------
Next The HTML
-----------------------------------------------------
<video id="bgvid" autoplay="" muted="" loop="">
<!-- * Be sure to replace YourMovieFile.mp4 with the name of your file -->
<source src=" YourMovieFile.mp4 " type="video/mp4">
</video>
-----------------------------------------------------
And That's It.Easy, Simple and Clean!
Just the way I likes it…