Размеры плеера

По ширине плеер всегда растягивается под размер своего контейнера. Высота по умолчанию рассчитывается из соотношения сторон 16:9 (самое популярное соотношение сторон видео). В настройках у плеера есть опция Размеры и цвет, там соотношение сторон можно изменить на 4:3 или вариант Размер контейнера. 

Если включена опция Адаптировать к пропорциям видео, плеер автоматически поменяет высоту согласно пропорциям видео. Если установлено значение 16:9 для плеера, а видео имеет формат 4:3, то плеер изменит свои размеры — увеличит высоту (к сожалению, эта опция не работает с YouTube, а также если плеер находится внутри iframe).

Размер контейнера

Если включена эта опция, то плеер растягивается на высоту, которая указана в стилях.

<div style="width:500px;height:281px">

Если указать высоту в процентах, то плеер автоматически переключится в режим Размер контейнера.

<div style="width:100%;height:100%">

Как растянуть плеер на всю страницу

Включите опцию Размер контейнера в настройках плеера (Настройки / Размеры и цвет / Соотношение сторон) и укажите контейнеру в css 100% для ширины и высоты, как в примере выше. Если на странице больше ничего нет, только div с плеером на весь экран, то для html и body следует указать 100% размеры, так как высота div в процентах зависит от высоты верхнего элемента. 

<style> html,body{width:100%;height:100%} </style>

Как изменить соотношение сторон видео в плеере

Иногда видео имеет неправильную информацию в метаданных, из-за которой картинка принимает неправильные пропорции. Чтобы исправить это недоразумение, можно использовать параметр ratio с указанием нужного соотношения сторон. Например, 4:3 или 16/9

var player = new PlayerJS({id:"player", file:"//site.com/video.mp4", ratio:"16/9"});

Как решить проблему с некорректным размером видео в полноэкранном режиме

Иногда на полном экране плеер не растягивается до конца по высоте или ширине. Это связано с тем, что на вашем сайте стоит глобальное ограничение в CSS на размер тега video с !important, которое нельзя отменить. Оно может выглядеть так

video {max-height:300px!important}

или так

video {height:300px!important}

Чтобы это исправить, нужно убрать подобное ограничение из CSS, либо сделать так, чтобы оно не было важным (!important) или глобальным и не затрагивало плеер.

---