Pixel
Pixel

Reputation: 1976

Set position background video html5

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 :

enter image description here

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

Answers (1)

hopkins-matt
hopkins-matt

Reputation: 2823

Try this.

CSS:

video.fillWidth {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

Upvotes: 2

Related Questions