I am interested in adding a video background with text overlay on my website, similar to what can be seen here:
Although I understand it involves CSS, I am struggling to achieve the desired effect. Here is the code snippet I have been using:
video#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-size: cover;
}
While this CSS creates a full background video, I am aiming for an effect more like animoto.com.