www.webdeveloper.com
Results 1 to 5 of 5

Thread: Video background not working in Firefox

  1. #1
    Join Date
    Jan 2013
    Posts
    7

    Video background not working in Firefox

    Hi there, sorry if this is something really obvious or asked loads of times. I did this tutorial on how to get a video background for your site with HTML5, it works great on Safari, but when I preview with Firefox the video isn't fullscreen, instead its really small and overlaps all the content on the page. Anyone have any idea why? I've added a screenshot of the safari/firefox difference.

    Cheers to anyone who may know where I'm going wrong!

    Screenshot
    The Youtube tutorial

    HTML5
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html, charset=utf8" />
        <title>HTML5 Video!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    	<head>
        	<nav>
    <ul>
                	<li class="active"><a href="#">HOME</a></li>
                    <li class=""><a href="#">PORTFOLIO</a></li>
                    <li class=""><a href="#">SERVICES</a></li>
                    <li class=""><a href="#">CONTACT</a></li>
        <img src="black icon set/facebook.jpg" width="26" height="26">
        <img src="black icon set/twitter.jpg" width="26" height="26">
         <img src="black icon set/vimeo.jpg" width="26" height="26">
         <img src="black icon set/youtube.jpg" width="26" height="26">
        </ul>
            </nav>
        </head>
    <section>
        	<article>
            	<h2><img src="stom logo2.png" width="404" height="75"></h2>
                <p>Video is a compelling and innovative method of telling people what you do or about your business in visually stimulating way. Whether it be creative and experimental or informative and educational, we pride ourselves in producing something that says what you need it to say using a range of pioneering techniques.</p>
            </article>
        </section>
        <video preload loop autoplay="true">
        	<source src="background showreel 01.mp4" type="video/mp4" >      
            <source src="background showreel 01.ogg" type="video/ogg" >
        Damn you, please work :(
        </video>
    </body>
    </html>
    CSS3
    Code:
    * {
    	margin: 0 0;
    	padding: 0 0;
    	font-family: "Helvetica Neue";
    	text-decoration: none;
    	color: #FFF;
    }
    body
    {
    	background: #000;
    }
    article, setion
    {
    	display: block;
    }
    section
    {
    	background: #000;
    	padding: 10px;
    	width: 530px;
    	position: absolute;
    	z-index: 100;
    	top: 80px;
    	opacity: 0.7;
    }
    	section article p
    	{
    		font-size: 13px;
    		line-height: 20px;
    		margin-bottom: 10px;
    	}
    video
    {
    	position: absoltue;
    	width: 101%;
    	height: 101%;
    	margin: 0 0;
    	z-index: -1;
    }
    nav
    {
    	position: absolute;
    	width: 675px;
    	margin-left;
    	z-index: 100;
    	display: block;
    	background: #000;
    	height: 34px;
    	border: 1px solid #777;
    	border-width: 0px 1px 1px 1px;
    	opacity: 0.7;
    }
    	nav ul
    	{
    		list-style: none;
    	}
    		nav ul li
    		{
    			float: left;
    			margin: 0px 24px;
    		}
    			nav ul li a
    			{
    				display: block;
    				margin-top: 6px;
    				font-size: 13px;
    				padding: 3px 10px 4px 10px;
    				color: #777;
    				text-direction: none;
    			}
    			nav ul li a:hover
    			{
    				background: #555;
    				color: #FFF;
    			}

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    You misspelled "absolute" in the CSS definition for 'video', which might cause Firefox to ignore the z-index setting since it is only supposed to apply to positioned elements.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jan 2013
    Posts
    7
    Ah cheers. I just corrected the spelling but unfortunately if hasn't made a difference. Does anyone know if there are problems viewing MP4s or H.264 video files on Firefox?

  4. #4
    Join Date
    Jan 2013
    Posts
    7
    I kinda sorted the problem, I had to make the file OGV instead of OGG. But now I can't get the OGV to show on Firefox unless I delete the MP4 tag. Anyone know how to have them both in the code but the only the relevant one is applied depending on the browser? The bloke in the tutorial didn't seem to have this problem.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,213

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles