Фоновое видео с позиции только в Safari

Question

Фоновое видео с позиции только в Safari. Когда я удаляю «top: 50%» и «left: 50%», он работает на Safari, но положение становится неуместным в Chrome и т. Д. Кто-нибудь получил какие-то идеи о том, как заставить его работать на обоих?

video { 
background-repeat: no-repeat; 
background-position: left top; 
display: inline-block; 
position: absolute; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
z-index: -100; 
transform: translateX(-50%) translateY(-50%); 
background: url(../images/vidstill.png) no-repeat; 
background-size: cover; 
transition: 1s opacity; 
} 

Answer 1

У меня была та же проблема. Для Safari распознать «transform: translateX (-50%) translateY (-50%)»; вам нужно добавить еще одну строку: «-webkit-transform: translateX (-50%) translateY (-50%);»

Добавление «-webkit» поможет Safari понять, чего вы хотите. Так что это будет в конечном итоге выглядит так:

video { 
background-repeat: no-repeat; 
background-position: left top; 
display: inline-block; 
position: absolute; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
z-index: -100; 
transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
background: url(../images/vidstill.png) no-repeat; 
background-size: cover; 
transition: 1s opacity; 
}