Html Переход - Видео Черный контур

Question

Обзор :

Я выполняю переход страницы на своем веб-сайте, в настоящее время я использую анимацию, и после ее завершения на экране появляется видео mp4 и воспроизводится на l oop до тех пор, пока страница не будет загружена.

Проблема:

В некоторых разрешениях видео имеет вид черного контура и нарушает эффект, видео "прозрачное".

Я пытался работать с overflow:hidden, но, похоже, я не могу заставить его работать.

это html

               <ul class="transition">
                    <div class="video-container">
                        <video autoplay loop muted playsinline class="transition__video"
                            src="<?php echo get_template_directory_uri(); ?>/assets/images/transition.mp4"
                            type="video/mp4">
                        </video>
                    </div>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

и вот стиль, который у меня сейчас есть

ul.transition {
  display: -webkit-box;
  display: flex;
  position: fixed;
  z-index: 90;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;

  -webkit-transition: all 0.5 ease-in;

  transition: all 0.5 ease-in;
}

ul.transition li {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  background: #33D1A8;
  width: 20%;
  -webkit-transition: all 0.5 ease-in;
  transition: all 0.5 ease-in;
}

.transition {
  &__video {
    position: fixed;
    display: none;
    width: 100%;
    margin: 0;
    z-index: 91;
    -webkit-transition: all 0.5s linear 0.3s;
    transition: all 0.5s linear 0.3s;
  }
}

Я пытался ответить на этот вопрос , но ничего не сделал для меня!

Пример изображения:

Заранее спасибо!

Answer 1

Установите box-shadow, outline и border как ни один для видеоэлемента (Добавить! Важно изменить специфичность):

.transition {
  &__video {
    position: fixed;
    display: none;
    width: 100%;
    margin: 0;
    z-index: 91;
    -webkit-transition: all 0.5s linear 0.3s;
    transition: all 0.5s linear 0.3s;
    box-shadow: none;
    border: none;
    outline: none;
  }
}