Подгонка объектов, не влияющая на видео в браузере Edge - PullRequest
Новая
       24

Подгонка объектов, не влияющая на видео в браузере Edge

0 голосов
/ 15 октября 2019

Я использую object-fit:cover для воспроизведения фонового видео на моем веб-сайте (прокрутите вниз). Firefox и Chrome отображают его правильно, а Edge - нет, хотя он поддерживает свойство object-fit. 

.sec-content > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.bg-video {
    position: absolute;
    z-index:4; 
    left: 0;
    top: 0;
    width: calc(50% + 400px);
    height: 100%;
}
.bg-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    box-sizing: border-box;
}
<div class="bgg-2 bg-video">
    <video autoplay="autoplay" muted="muted" playsinline="" loop="loop" poster="/images/2.jpg" class="scroll-video">
        <source src="/files/video-test.mp4" type="video/mp4">
    </video>
</div>

Почему Edge не отображает его так, как должно быть?

Ответы [ 3 ]

1 голос
/ 15 октября 2019

Да, я сталкивался с этой проблемой раньше. Microsoft Edge не понимает object-fit: cover в тегах видео HTML5.

Хорошая новость: новая версия Edge на основе хрома (все еще в бета-версии) исправляет эту ошибку. В то же время, если вам нужно оказать поддержку этому браузеру, вы можете использовать эту хакерскую программу старой школы. 

.bg-video > video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
0 голосов
/ 15 октября 2019

object-fit было отправлено в Edge 16, но мне кажется, что это проблема с краем

Попробуйте: 

.bg-video video {
position: absolute;
top: 0;
left: 0;
width: auto; // changed from 100%
height: 100%;
-o-object-fit: cover;
object-fit: cover;
box-sizing: border-box;
}
0 голосов
/ 15 октября 2019

Вы можете использовать fitvids.js на вашем сайте. это возможное решение JQuery. 

<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>
...