Размер видео .js для соответствия div

У меня есть video в div с 40% шириной. В html width="100%" height="auto" видео исчезнет. Установка определенного размера в пикселях не соответствует div. Выход из html-бланка оставляет видео с неправильным размером и с черными полосами по бокам.

Я пробовал предложения в большинстве других сообщений, но не могу заставить его работать.

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>

Ответ 1

Вы должны использовать уродливое! важно переопределить абсолютное позиционирование по умолчанию для видео:

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

Это будет сделано после того, как изображение будет отображаться после видео, а не поверх него, поэтому вы должны исправить его с помощью

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Обратите внимание, что он должен иметь то же отношение, что и видео, которое вы хотите, чтобы оно было хорошо отображено.

Ответ 2

В версии 5 видеоjs вы можете использовать класс vjs-16-9 vjs-4-3 для видеообъекта,

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

или используйте опцию fluid

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

Источник: https://coolestguidesontheplanet.com/videodrome/videojs/

Ответ 3

В HTML-теге установите ширину и высоту на авто. Затем с помощью CSS установите ширину/высоту идентификатора видео на 100%.

Настройка атрибутов width и height для auto делает плеер таким же, как div, который по умолчанию не имеет параметров.

Ответ 4

Здесь метод, который я использовал для решения этой проблемы. Сначала удалите любое объявление размера на видеообъект.

Задайте свойство, содержащее ваше свойство элемента, относительно.

.video_container {
  position: relative;
}

Добавьте изображение плаката к содержащему элементу и установите его ширину на 100% и высоту на авто. Это заставит div по размеру вертикально на высоту плакатного изображения (которое, если вы сделали это правильно, должно быть того же размера, что и ваше видео)

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

Теперь установите положение .video-js в абсолютном и установите его высоту и ширину на 100%. Это приведет к тому, что .video-js будет масштабироваться до высоты и ширины плакатного изображения, которое соответствующим образом масштабируется до содержащего div.

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

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

Ответ 5

Просто нашел это: http://jsbin.com/idinaf/4/edit отсюда http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

надеюсь, что это поможет кому-то.

edit: IMO, вы должны просто попробовать это с помощью простого CSS:

width: 100% !important;
height: auto !important;

Ответ 6

  video[poster]{
    object-fit: fill;
}

сделал это для меня