Я пытаюсь предотвратить переход видео от скачка при загрузке. Я применил этот трюк с отступами для соотношения сторон, который работает нормально, но не тогда, когда видео требует максимальной ширины, применяемый отступ кажется слишком большим и никогда не подходит правильно , Есть идеи?
Справочные ссылки:
https://css -tricks.com / коэффициента пропорциональности ящики /
https://itnext.io/how-to-stop-content-jumping-when-images-load-7c915e47f576
.video-wrap {
position: relative;
height: 0;
padding-top: calc(675 / 1200 * 100%);
}
#tutorial-video {
position: absolute;
top: 0;
left: 0;
max-width: 600px;
width:100%;
height: auto;
}
<div class="video-wrap">
<video id="tutorial-video" width="100%" poster="/assets/video-poster.jpg" autoplay loop playsinline>
<source src="/videos/tutorial.mp4" type="video/mp4">
</video>
</div>
Fiddle:
https://jsfiddle.net/ko1L84b5/2/