Респонсивный видеоплеер. CSS адаптивных видео

Drupal: 

Адаптивный дизайн на Drupal - это ещё и адаптивный видеоплеер. Предложенные здесь css-коды для Drupal 7 и Drupal 8 делают респонсивным плеер с именами классов Video Embed. Вы можете переписать эти примеры css для видео внутри текстовых полей и любых других имён классов (не только друпал).

Все модули вставки видео на Drupal

Вставлять видео из YouTube и Vimeo очень удобно с модулем Video Embed Field. Этот модуль позволяет выбирать стиль отображения поля типа Video Embed, создавать и управлять этими стилями. В настройках каждого стиля можно задать:

  • ширину плеера,
  • высоту плеера,
  • качество картинки-миниатюры,
  • стиль и цветовую схему видеоплеера (ютуб),
  • другие параметры.

Поле типа Video Embed можно отображать в виде картинки-миниатюры с ссылкой на видео во всплывающем окне Colorbox, что очень удобно. А можно отображать сразу плеером. Тогда возникает вопрос, как сделать плеер респонсивным и адаптирующимся под размеры окна.

Также есть другие модули: Media, Media Youtube, Youtube Field, Googtube, Video Filter, Embedded Media Field, Video Embed Field, FitVids, Videojs, Jw Player.

Из этих модулей есть претензии к Youtube Field, который умеет вставлять тамбнейлы вместо плеера, но эта функция вызывает ошибки.

FitVids - эта библиотека может использоваться на любом сайте, а для друпал можно скачать готовый модуль, применяющий эту библиотеку. FitVids - это js-скрипт, который делает адаптивными все видео на вашем сайте. Его использовать не обязательно, так как CSS отлично справляется с этой задачей, и в отличие от javascript, работает на всех устройствах. (Интересно, а работает ли видео на всех устройствах? )

 

Следующий CSS-код написан с именами классов Video Embed, но его можно корректировать, правильно указав имена классов полей других модулей или видео внутри текстовых полей.

 

Как сделать плеер Video Embed респонсивным

  1. Удалите ширину и высоту в настройках используемого стиля (по умолчанию Normal) на станице Конфигурация - Медиа-файлы - Video Embed Field - Normal редактировать.

  2. Добавьте следующий css в файл стилей темы styles.css

Обратите внимание, что в коде для Drupal 8 ограничена работа стиля только для страницы материала классом .path-node - это сделано из предположения, что в анонсах отображаются тамбнейлы, а не плеер (тамбнейлы и плеер не имеют различий в классах в 8 друпале, для тамбнейлов не нужно растягивание на всю ширину).

  1. /*video embed responsive D8*/
  2. .path-node .field--type-video-embed-field {clear:both;padding:8px 0;}
  3. .path-node .field--type-video-embed-field .field__item {
  4. text-align: center;
  5. position: relative;
  6. padding-bottom: 56.25%;
  7. padding-top: 30px; height: 0; overflow: hidden;
  8. }
  9. .path-node .field--type-video-embed-field .field__item iframe {
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. }
  1. /*video embed responsive D7*/
  2. .player {text-align: center;}
  3. .field-type-video-embed-field {clear:both;padding:8px 0;}
  4. .embedded-video .player {
  5. position: relative;
  6. padding-bottom: 56.25%;
  7. padding-top: 30px; height: 0; overflow: hidden;
  8. }
  9. .embedded-video .player iframe,
  10. .embedded-video .player object,
  11. .embedded-video .player embed {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. height: 100%;
  17. }

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