Styling the html5 <video> tag

Hey guys,
I made a introduction vidoe to a site i am designing and since the rest of the site is in html5, i figured why not have the video with the video tag.

In doing so, I tried to center the video tag however the margin styling tha tI applied to the div element, which contains it and a skip intro link.

Here is my code:

<html lang="en">
<meta charset="utf-8" />
<link rel="shortcut icon" href="../assets/images/favicon.ico">
<link rel="icon" type="image/" href="../assets/images/favicon.ico">
<link rel="icon" type="image/png" href="../assets/images/favicon.png">
<meta name="author" content="Irfan Mir (The Irf)" />
<meta name="description" content="The Official website for The Irf: Awesomeness Personified"/>
<meta name="keywords" content="Awesome, Irfan, Mir, Irf, The irf, the-irf, awesomeness, gangsta, gangsta gangsta pimp, HTML5, php, css, elegance, best"/>
<meta name="revised" content="Last Revised, 29/10/2010" />
<title>The Irf | Welcome Video</title>
			margin:0px auto 0px auto;

		li a{
			font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		li a:hover{


		<video src="" controls="controls" autoplay="autoplay">
			Please upgrade your browser to meet the latest standards of the web
			<li><a href="" />Skip the Intro</a></li>

What am I doing wrong and why isn’t the video and the link being centered?

Thanks in Advance,
Team 1504

Why did you wrap a div around the video tag?

Is this what you are using to center it?
margin:0px auto 0px auto;


That doesn’t work (ever) because not only do you need the automargins, but you MUST have a width stated too. A width which is less than 100%. Right now your div is 100% wide (that’s the default for static blocks), so “auto” in the margin just becomes “0”.

Of course, the element must also be a block type element.

You could remove the div.

video {
display: block; /browsers who don’t understand HTML5 need this anyway, though I dunno what HTML5 specs say about video elements… if they are blocks like divs or inlines like <object> tags?/
width: whatever;
margin: 0 auto;

Nitpick: no, the default is “auto”, which fills up the available width. It’s different to 100% which becomes clear if you set padding/border/margin. :slight_smile:


Not strictly needed for <video> since it is a replaced element and has a width already (either the same as the video or 300px if there’s no video).

An alternative way to do it is to set text-align:center on an ancestor.

Thank you guys,

Stomme poes’ code worked.
And thank you zcorpan for the clarifications.

Thanks again :slight_smile: