CODEWITHSUNDEEP
htmlvideoalignmentcenter
midknyte
midknyte

Reputation: 617

vertically centering video inside a video tag

how do you center vertically a video inside a video tag? currently the video is flush top and the bottom is getting cut off. what i would like to do is for the middle of the video to be in the middle of the video container. the video's height will vary because it's responsive so as the browser becomes smaller so does the video. here's my code:

html

<div id="video-wrap">
    <video preload="auto" autoplay loop muted>
        <source type="video/mp4" src="video.mp4">
    </video>
</div>

css:

#video-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

Upvotes: 20

Views: 27576

Answers (1)

m0bi5
m0bi5

Reputation: 9462

These three lines should do:

video{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Let me know if it works :)

Upvotes: 63

Related Questions