Черная граница или линия, отображаемая на краях html Элементы, несмотря на границы в видеофайле ⇐ Html

[Anonymous]

Я встраиваю видео MP4 в адаптивную макет с использованием HTML/CSS. Видео выглядят чистыми в исходном файле, но тонкая черная линия отображается вдоль определенных ребра (спорадический внешний вид, иногда также появляется в определенных положениях прокрутки) видео. Edge).
[*] Видео находится внутри .video-wrapper с Border-radius и Box-shadow .

Вот упрощенная версия моей настройки:
html:



< /code>
css: < /p>

Код: Выделить всё

.video-wrapper {
overflow: hidden;
border-radius: 32px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
border: 1px solid #c4c4c4;
}

.video-wrapper video {
width: 100%;
object-fit: cover;
}

Вот снимок экрана для справки, тонкая черная линия отображается вдоль ребра:

. />
[*] Добавление переполнения: hidden к обертке и видео.
Использование clip-path: inset () для маскировки (работает, но руины тени и радиус границы).>

Подробнее здесь: https://stackoverflow.com/questions/796 ... te-no-bord