html background video inconsistent behaviour across browsers?

My video background works perfect in chrome, in firefox there are black bars around it, and in safari it just plays in the lower left corner. How can I make the video background consistent across all browsers?

This is the html:

<video autoplay="true" loop="true" muted="true" id="bgvideo"> <source src="BgVid.mp4" type="video/mp4"> <source src="BgVid.webm" type="video/webm"> </video>

This is the css:

#bgvideo{ position: fixed; top: 50%; left:50%; min-width:100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: tanslateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: ; background-size: cover; overflow: hidden; }

Category:html Views:0 Time:2018-07-10

Related post

  • Javascript WYSIWYG textarea plugins produce inconsistant results across browsers? 2011-07-22

    I'm in need of a lightweight, Javascript-based, WYSIWYG editor that transforms <textarea>s into Rich Text Editors. There are thousands of these plugins out there (and I feel like I've demoed them all). For reasons outside of my control, I need

  • Using Rowspan on table, Last row behaviour across browsers 2011-11-24

    So I have a table, like the below <table> <tbody> <tr> <td rowspan="4"> <img src="ImageofProduct.jpg" /> </td> <td>ProductName</td> <td>Hat</td> </tr> <tr style="height:1%"> <

  • css html background gradient 2011-05-03

    i found this css to create background gradient html { background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear,

  • Why is JavaScript inconsistent across browsers? 2010-08-06

    Here's something I've been pondering after countless hours fixing JS to be cross-browser compatible (mostly IE): Why isn't Javascript consistent accross browsers? I mean, why can't JS be nice like Java and Flash? Instead, we have to resort to framewo

  • HTML / Conditional Comments - Do conditional comments behave as expected across browsers? 2010-06-08

    Do conditional comments behave as expected across browsers? Can they cause rendering bugs or other issues? Are there any errors in the formatting/syntax of this CC? <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="718" height="2

  • Page cache inconsistency across browsers 2011-09-18

    Ive done all my Wordpress development in Firefox and I am using a caching plugin called W3 Total Cache. The only problem I'm facing is that in Safari and Chrome, my navigation is being reloaded each time a user works their way through the navigation,

  • Inconsistent behaviour in WebView loadUrl() using local html file and #tags - API 7 and API 10 2011-11-14

    Summary: Problem whilst trying use a webview to open a standard html file located in the “assets” directory. The html document contains location anchors throughout, and I try to navigate directly to these when opening the document by supplying a #tag

  • Full-bleed background videos? 2009-08-04

    I'm wondering if anyone has thought about or come across any realistic methods for providing a full bleed background VIDEO to a site, without resulting in the site being dead slow. Ideally I don't want to have to use Flash. And By full bleed I mean f

  • An inconsistency problem between browsers, puzzle me long time 2010-01-09

    First, the screenshots As you see, although i explicitly described the height, padding-top, etc, there's always a little differece between browsers, how can i make them the same? This problem keep puzzling me and i never find the cause, i even tried

  • HTML 5 video custom controls 2010-01-21

    Like many web developers I'm looking forward to streaming video that utilizes the new HTML 5 <video> tag. Browser support definitely isn't wide enough yet, so using a Flash/SWF fallback is a must. This got me thinking: in Flash it's possible to

  • What preferred way to reconcile keyCode/charCode across browsers? 2010-05-26

    Based on the properties of the keydown event I would like to ascertain what the current charCode are? Example. For the keydown event when the NumPad0, D0, and Colon key is pressed I would like to know what the associated charcode is. Currently I have

  • Flash video player VS HTML 5 Video 2010-06-12

    I need to add a video player to play a video on a webpage. usually i use Flash player with the help of swfobject library. which works if flash player and javascript both are enabled. I'm currently using XHTML 1.0 strict doctype. My question is can i

  • Websites looking different across browsers? Why don't people care? 2011-06-23

    Our company is looking at building a brand new website in the next couple of months and the IT director is all gung-ho to start using HTML5 and CSS3. He really thinks it's the coolest thing and definitely doesn't care that a website styled with HTML5

  • CSS fluid grids across browsers 2011-07-12

    I'm creating a grid system for a bunch of our own apps / portals. We have the basic grid width and gutter, etc in place; but we are considering making the grids a little responsive. Considering that, we wanted to make an elastic grid system. While, E

  • Embedding YouTube videos in older mobile browsers 2012-01-21

    So I'm working on a project and I'm using YouTubes iframe embed code and it'll work on newer devices like the iPhone and Android devices. However, when viewed on older Android and Blackberry I get a couple links about Getting newest Flash Player and

  • Fullscreen Background Video with HTML5 2012-03-13

    i'm trying to create a website with a full screen background video, so I searched several sites on Google and some posts on StrackoverFlow. The most interesting post was that about the, however I can not get it t

  • Can I get consistent CSS colors across browsers? 2010-01-25

    I'm testing a new site, and I have a div with background-color: #bbf6bb; That seems innocuous enough to me. And yet, on my MacBook Pro, the color looks very different in Firefox 3.6 vs. Safari 4. In Safari, it's the color I'd expect from the hex valu

  • how can i tell if a javascript function works across browsers 2010-05-26

    How can I tell if a given javascript function will work across browsers? For instance, I want to use String.trim() and I see that it works in Firefox, but will it work in all the other major browsers? I imagine there is a good doc online somewhere, b

  • How to pause an html 5 video at a specific time 2010-05-27

    Is there an elegant way to pause html 5 video at a specific time? I tried two ways: Use the timeupdate event and see if the currentTime property is greater than the desired time and make a call to pause(). This performs well in Firefox, other Browser

  • I need help with getting these div dimensions to be uniform across browsers 2010-07-15

    I am working on a website located here: I used a 960 grid, and the css for the 960 was taken from the website: (google 960 gs because I can only post one hyperlink) I realize that maybe I should have just avoid

  • How to normalize padding and margins across browsers 2010-08-07

    How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies. It seems for some elements, with some browsers, setting a padding or margin to

  • HTML-5 : video tag. Video not playing 2010-12-24

    I was trying use/test video tag of HTML-5. Here is the code <!DOCTYPE HTML> <html> <body> <video src="./Pilot.avi" controls="controls"> your browser does not support the video tag </video> </body> </html> Pil

  • HTML 5 video streaming .ism file? 2011-06-24

    I have an IIS 7.0 server setup with Media Services 4.0. I created a very simple html 5 page which containts a video with its source pointing to a *.ism file. Is it possible to play the video using the manifest of the ism file in html 5, like in silve

  • How can I scroll to a DIV's child element consistently across browsers? 2011-07-25

    I have a test case here: It has a DIV containing a very long list of links. I want to scroll the DIV down to a given link. In my test case, that's done by pressing the JSTOR button, which advances it to

  • HTML5 Background Video - Makes Other Content Pixelated / Grainy 2011-08-15

    I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin ( I got the video to load and work properly, but every time it makes other content appear gra

Copyright (C), All Rights Reserved.

processed in 0.105 (s). 11 q(s)