Styling the html5 <video> tag

HTML & CSS
1

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:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../assets/images/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" 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>
<style>
		body{
			background:#000;
		}
		div{
			margin:0px auto 0px auto;
		}

		li a{
			color:#fff;
			text-decoration:none;
			font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		}
		li a:hover{
			text-decoration:underline;
		}
</style>
</head>

<body>

	<div>
		<video src="introHD.mov" controls="controls" autoplay="autoplay">
			Please upgrade your browser to meet the latest standards of the web
		</video>
	</div>
	<div>
		<ul>
			<li><a href="the-irf.com/index.php" />Skip the Intro</a></li>
		</ul>
	</div>
</body>
</html>

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

Thanks in Advance,
Team 1504

2

Why did you wrap a div around the video tag?

Is this what you are using to center it?
div{
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;
}

3

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:

Inline.

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.

4

Thank you guys,

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

Thanks again :slight_smile: