Видео переполнено только на мобильном

Question

Попытка создать видео углового радиуса, используя контейнер. Отлично работает в любом браузере на рабочем столе, а на мобильном видео переполнен контейнер.

.videoC {
  width: 70vw;
  height: auto;
  margin-top: 2%;
  margin-left: calc(15vw - 4px);
  border-radius: 10vw;
  border-style: solid;
  border-color: white;
  border-width: 8px;
  overflow: hidden !important;
}

.video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

<div class="videoC">
  <video class="video" loop="loop" muted autoplay defaultMuted playsinline oncontextmenu="return false;" src="xxx"></video>
</div>

на мобильном телефоне iOS Safari, видео углы переполнены.

Answer 1

Оказывается, ошибка Safari, решение, если добавить это к родителю:

transform: translate3d(0, 0, 0);

, и это сработало.

Answer 2

вам нужно создать мобильную версию вашего сайта. Вы можете использовать:

@media only screen and (max-width: 600px){
//
}

, где: @media - это правило css css - только экран, а () - для установки «предела» вашего правила --max-width, если для установки максимальной ширины для вашего правила