Переход HTML - черный контур видео

Question

Обзор:

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

Проблема:

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

Я пробовал работать с 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;
  }
}

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

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

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