SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question 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:
    Code HTML4Strict:
    <!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. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Right now your div is 100% wide (that's the default for static blocks),
    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.

    Quote Originally Posted by Stomme poes View Post
    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?*/
    Inline.
    Quote Originally Posted by Stomme poes View Post
    width: whatever;
    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.
    Simon Pieters

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys,

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

    Thanks again


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •