Удалите черные границы из адаптивного видео Bootstrap 4 - PullRequest
Новая
       7

Удалите черные границы из адаптивного видео Bootstrap 4

1 голос
/ 20 июня 2020

Я бы хотел удалить черные границы с видео и оставить его отзывчивым. Я использую Bootstrap 4.5. Я также хотел бы сохранить разрешение панорамы c моего видео, 1920x764. Почти уверен, что проблема связана с разрешением. Должен ли я затем редактировать файлы bootstrap. css? 

<body>
    <!-- Video -->
    <!-- XLG/LG - 21:9 aspect ratio -->
    <div class="d-none d-lg-block embed-responsive embed-responsive-21by9 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- MD - 16:9 aspect ratio -->
    <div class="d-none d-md-block d-lg-none embed-responsive embed-responsive-16by9 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- SM - 4:3 aspect ratio -->
    <div class="d-none d-sm-block d-md-none embed-responsive embed-responsive-4by3 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- XSM - 1:1 aspect ratio -->
    <div class="d-block d-sm-none embed-responsive embed-responsive-1by1 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
    <!-- Video -->

    <!-- Javascript files -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

</body>

У вас есть идеи, как я могу решить эту проблему? Спасибо!

1 Ответ

1 голос
/ 20 июня 2020

Как мы видим, Bootstrap 4 содержит список встроенных аспектов ios. Пропорции .embed-responsive-21by9 из этого списка определяются в BS CSS так: 

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

Похоже, ваше разрешение не совсем стандартное. Давайте добавим новый класс в ваш CSS (или в Bootstrap). Допустим, это будет .embed-responsive-19by7. 1920 = 100%, 764 = 39,7916% (используя пропорцию 764 * 100/1920 = 36,79166 ). Таким образом, ваш дополнительный CSS равен 

.embed-responsive-19by7::before {
  padding-top: 39.7916%;
}

Теперь ваше видео будет 

<!-- panoramic - 19:7 aspect ratio -->
    <div class="d-none d-lg-block embed-responsive embed-responsive-19by7 cab-video">
        <video class="embed-responsive-item">
            <source src="video.mp4">
        </video>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...