Reputation: 1976
In full screen i would like to set my video on middle vertical position.
I able to put the video on the Top or on the bottom by changing bottom: 0;
or top: 0;
on the video.fillWidth
class but i can't set it on the middle position.
I would like that :
CSS :
.header-unit {
position: relative;
height: 600px;
}
video {
display: inline-block;
}
#video-container {
z-index: -1;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
video.fillWidth {
bottom: 0;
position: absolute;
width: 100%;
}
@media (max-width: 1099px){
video.fillWidth{
height:100%;
width:auto
}
}
HTML :
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="movie.mp4" type="video/mp4"/>
</video>
</div><!-- end video-container -->
</div><!-- end .header-unit -->
Upvotes: 2
Views: 1452
Reputation: 2823
Try this.
CSS:
video.fillWidth {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
Upvotes: 2