предотвратить видео с максимальной шириной прыжка - PullRequest
0 голосов
/ 11 июля 2019

Я пытаюсь предотвратить переход видео от скачка при загрузке. Я применил этот трюк с отступами для соотношения сторон, который работает нормально, но не тогда, когда видео требует максимальной ширины, применяемый отступ кажется слишком большим и никогда не подходит правильно , Есть идеи?

Справочные ссылки: 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...