-1

I add some videos to my website and when I tested on Chrome it's working correctly, but when I tested on safari and Firefox it shakes. What is the problem?

This is my CSS code:

.parallax-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

When I read about this problem I think the problem in this part 

 transform: translate(-50%,-50%);

But I don't know how I can fix it.

James Jones
  • 3,850
  • 5
  • 25
  • 44
H. Ghass
  • 63
  • 1
  • 9
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Aug 15 '18 at 09:37

1 Answers1

1

Try this code 

.parallax-background video {
  -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}
Ramesh
  • 2,297
  • 2
  • 20
  • 42
  • Thank You but the video become small and its go to top and left – H. Ghass Aug 15 '18 at 09:42
  • its work when i added to my code no replace, but he slow in safari and he display the alternative image then he load the video why ? – H. Ghass Aug 15 '18 at 09:47
  • It's not possible to explain. I need to go through your css and js and explain for more. It the answer was correct upvote and click on the correct – Ramesh Aug 15 '18 at 09:49
  • The non-prefixed, standards compliant version [should _always_ come last](https://stackoverflow.com/questions/7080605/ordering-of-vendor-specific-css-declarations/7080674). – Turnip Aug 15 '18 at 10:13
  • @Turnip That's a new thing to me. Thank you – Ramesh Aug 15 '18 at 10:16