Видеотег полноразмерный IE - PullRequest
Новая
       8

Видеотег полноразмерный IE

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

Я пытаюсь добиться полного отображения на моем сайте. Все хорошо в Chrome, но теперь проблема с IE11. Кажется, что само видео не устанавливается на полную ширину.

enter image description here

Как вы можете видеть на изображении, черная часть слева и справа. Но если вы посмотрите на изображение ниже enter image description here

Как вы видите, видео здесь настроено на полную ширину. Есть идеи, в чем проблема? Ниже приводится CSS 

.html--homepage_content {
    video {
        width: 100%;
        max-height: 100%;

        @media #{$mqMediumAndUp} {
            width: initial;
            max-height: initial;
        }
    }

    .video-player-container {
        height: 100vh;
        position: relative;
        overflow: hidden;
    }
}

.video-player-container {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;

    video {
        width: 100% !important;
        height: 100% !important;

        @media #{$mqMediumAndUp} {
            width: initial !important;
            height: initial !important;
        }

        object-fit: cover;
        text-align: center;
    }
}

HTML 

<div class="video-player-container content-block__content">
    <video autoplay="" muted="" loop="" playsinline="">
        <source src="http://website.com/video/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video> 
</div>

Ответы [ 3 ]

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

Вы можете использовать этот код 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    .video-player-container {
      width: 100%;
    }
    
    .video-player-container video {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="video-player-container content-block__content">
    <video width="100%" height="240" autoplay="" muted="" loop="" playsinline="" controls>
        <source src="http://website.com/video/video.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 18 октября 2019

object-fit: cover - не поддерживается в IE 11 . Вы можете использовать полифилы для этого. Пожалуйста, отметьте этот полифилл .

Вы можете использовать его, как показано ниже, не забудьте заменить src из polyfill на ваш, он может хорошо работать в IE 11: 

<style>
    .container {
        width: 100%; /* Or whatever you want it to be */
        height: 25em; /* Or whatever you want it to be */
    }

    .media {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Or whatever object-fit you want */
    }
</style>

<div class="container">
    <video autoplay="" muted="" loop="" playsinline="" data-object-fit="cover" class="media">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>
<script src="js/objectFitPolyfill.min.js"></script>
0 голосов
/ 17 октября 2019

Режим масштабирования видео, вероятно. Проверьте, например, https://www.sitepoint.com/community/t/how-to-fit-video-into-entire-div-that-works-on-ie-too/283224.

Если это не работает для вас, и вы знаете размеры видео, вы всегда можете масштабировать его вручную, оборачивая в другой div со смещением, которое не видно, но это уродливогуманный.

...