I'm just messing around with some HTML5, and I was trying to center a video on the page. For some reason I can't get it to center. I've tried to add a class to the video tag itself, and I've wrapped the video in a separate div. However, the video stays on the left.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/css">
.center {
margin: 0 auto;
}
</script>
</head>
<body>
<div class="center">
<video controls="controls">
<source src="/media/MVI_2563.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
I know this must be something I'm overlooking in the wee hours of the morning, but any help would be appreciated.
Thanks
I was having the same problem. This worked for me:
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
If you have a width in percent, you can do this :
video {_x000D_
width: 50% !important;_x000D_
height: auto !important;_x000D_
margin: 0 auto;_x000D_
display: block;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<body>_x000D_
_x000D_
<video controls>_x000D_
<source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_eclipse_of_the_moon.mp4" type="video/mp4">_x000D_
Your browser does not support HTML5 video._x000D_
</video>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>@snowBlind In the first example you gave, your style rules should go in a <style> tag, not a <script> tag:
<style type="text/css">
.center {
margin: 0 auto;
}
</style>
Also, I tried the changes that were mentioned in this answer (see results at http://jsfiddle.net/8cXqQ/7/), but they still don't appear to work.
You can surround the video with a div and apply width and auto margins to the div to center the video (along with specifying width attribute for video, see results at http://jsfiddle.net/8cXqQ/9/).
But that doesn't seem like the simplest solution...shouldn't we be able to center a video without having to wrap it in a container div?
<html>
<body>
<h1 align="center">
<video width="1000" controls>
<source src="video.mp4" type="video/mp4">
</video>
</h1>
</body>
</html>Use margins <video> is an inline element so you'll have to add display block;to your css class.
You can use specific with, but I wouldn’t use px values. Use % to make it responsive, like:
width: 50%;
That’ll make the video half of the viewport width.
See the original documentation here O World Wide Web Consortium W3C
mystyle.css
video {_x000D_
width: 50% !important;_x000D_
height: auto !important;_x000D_
margin: 0 auto;_x000D_
display: block;_x000D_
}_x000D_
_x000D_
h1 {_x000D_
text-align: center;_x000D_
color: #C42021;_x000D_
font-size: 20px;_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Test</title>_x000D_
<link rel="stylesheet" type="text/css" href="mystyle.css">_x000D_
</head>_x000D_
<body>_x000D_
<h1>_x000D_
How do you center a video _x000D_
</h1>_x000D_
<div class="center">_x000D_
<video controls="controls">_x000D_
<source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />_x000D_
</video>_x000D_
</div>_x000D_
</body>_x000D_
</html>See the code ready here for more understanding.
HTML CODE:
<div>
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600">?</video>
</div>
CSS CODE:
.center {
margin-left: auto;
margin-right: auto;
display: block
}
All you have to do is set you video tag to display:block; FTW the default is inline-block FTL.
Try this
.center {
margin: 0 auto;
width: (whatever you want);
display: block;
}
Do this:
<video style="display:block; margin: 0 auto;" controls>....</video>
Works perfect! :D
.center { width:500px; margin-right:auto; margin-left:auto; }
I was having the same problem, until I realized that <video> elements are inline elements, not block elements. You need only set the container element to have text-align: center; in order to center the video horizontally on the page.
I will not prefer to center just using video tag as @user142019 says. I will prefer doing it like this:
.videoDiv_x000D_
{_x000D_
width: 70%; /*or whatever % you prefer*/_x000D_
margin: 0 auto;_x000D_
display: block;_x000D_
}<div class="videoDiv">_x000D_
<video width="100%" controls>_x000D_
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">_x000D_
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">_x000D_
Your browser does not support the video tag._x000D_
</video>_x000D_
</div>This will make your video responsive at the same time the panel for controls will have the same size as the video rectangle (I tried what @user142019 says and the video was centered, but it looked ugly in Google Chrome).
I had a similar problem in revamping a web site in Dreamweaver. The site structure is based on a complex set of tables, and this video was in one of the main layout cells. I created a nested table just for the video and then added an align=center attribute to the new table:
<table align=center><tr><td>
<video width=420 height=236 controls="controls" autoplay="autoplay">
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/video.webm" type='video/webm' >
<source src="video/video.mp4" type='video/mp4'>
<p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
</video>
</td></tr></table>
I found this page while trying to center align a pair of videos. So, if I enclose both videos in a center div (which I've called central), the margin trick works, but the width is important (2 videos at 400 + padding etc)
<div class=central>
<video id="vid1" width="400" controls>
<source src="Carnival01.mp4" type="video/mp4">
</video>
<video id="vid2" width="400" controls>
<source src="Carnival02.mp4" type="video/mp4">
</video>
</div>
<style>
div.central {
margin: 0 auto;
width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>
Worked for me!
Try this:
video {
display:block;
margin:0 auto;
}
Source: Stackoverflow.com