Menu
In the following code, I am trying to center a video to full mobile screen height, and wanted to evenly overflow the video width to left and right side.
style #0 shows the original size
style #1 shows me trying to center the video, but the video shifts to the right
style #2 shows the fix, the video is perfectly centered, however, the transformation will cause issues when our web site's language is in RTL (right aligned language, such as Arabic).
I wanted to find a way to properly center the video without using any transformation (i.e. do not use style #2), any good suggestions?
cshtml:
<div class="videodiv">
<video class="webvideo"></video>
</div>
Style #0:
This shows the original video in its natural ratio
.videodiv {
text-align: center;
}
.videodiv .webvideo {
display: block;
margin: 0 auto;
}
Style #1: under this css, when height is 100%, the video width actually overflows the screen, the left side is aligned with left screen border, the right side overflows.
.videodiv {
text-align: center;
}
.videodiv .webvideo {
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
Style #2:
.videodiv {
text-align: center;
}
.videodiv .webvideo {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
677
Will this work? Tested on Chrome, Firefox and Samsung Internet.
<html>
<head>
</head>
<body>
<div class="video_container">
<video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" autoplay muted>
</video>
</div>
<style>
body {
padding:0px;
margin:0px;
}
.video_container, .video {
padding:0px;
margin:0px;
width:100%;
height:100vh;
object-fit: cover;
}
</style>
<script>
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
