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


По ширине плеер всегда растягивается под размер своего контейнера. Высота по умолчанию рассчитывается из соотношения сторон 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>

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

Иногда видео имеет неправильную информацию в метаданных, из-за которой картинка принимает неправильные пропорции. Чтобы исправить это недоразумение, начиная с версии 9.49 можно использовать параметр ratio с указанием нужного соотношения сторон числом или обозначением. Например, 1.77 или 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) или глобальным и не затрагивало плеер.




2020 © PlayerJS

Логин

Восстановить пароль
Создать аккаунт
Войти

Регистрация

Создать аккаунт
Регистрируясь, вы принимаете Пользовательское соглашение
Войдите, если уже есть аккаунт

Enterprise

Ваше имя
Сайт
Email
Телефон
Комментарий
Отправить запрос

Восстановить пароль

Восстановить
Если вы забыли свой email, напишите нам