Многие из вас наверное заметили, что тенденцией современности по прежнему остается адаптивность вашего контента под любые устройства. Но что делать с роликами из YouTube?
Как адаптировать ролики из YouTube на своем сайте?
Для начала выделим какой-то контейнер и вставим в него наш ролик. Чтобы это сделать нажмите “Поделиться” под видео на сайте и выберите “HTML-код”. Копируем наш iframe и получаем следующее:
<div class="video-block"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe> </div>
Наш CSS выглядит следующим образом:
.video-block { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-block iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Давайте разберемся, что происходит: наш контейнер с классом .video-block на самом деле не имеет фиксированной ширины и вы можете вставлять наш адаптивный ролик с youtube в любое место на сайте, и он займет всю ширину. Внутренний отступ снизу, который равен 56.25% – задает высоту контейнера (если соотношение 16:9, если 4:3 – поставьте 75%). Таким образом, мы получили адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах.
UPDATE: советую использовать стили для адаптивного контейнера, если ширина блока 640, то:
.video-block-opt { text-align: center; margin-bottom: 25px; } @media (max-width: 640px) { .video-block-opt { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-block-opt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }
Обратите внимание, класс у контейнера поменялся на .video-block-opt и теперь наши стили применяются только на маленьких экранах. Надеюсь у вас всё получилось и теперь вы знаете как сделать ваши ролики из ютуб адаптивными :).
Благодарю, решение подошло, но не могу решить проблему с выравниванием видео по центру по горизонтали, а также с широким отступом снизу. На смартфоне блок с видео теперь не вылазит за границу, однако пропорции видео теперь вертикальные, что не очень красиво.
Артем, вижу вы решили поместить видео в тег center для выравнивания, этот тег немного устарел, рекомендую добавить вашему блоку .video-block {margin: 0 auto;}. Что касается отступов – вам нужно убрать пустые теги p, и, немного улучшить CSS код который дал: .video-block {margin: 0.857143rem auto;} где 0.857143rem, как я понял, нужный вам отступ.
Дмитрий, благодарю. С тегами P только проблема, в редакторе их нет. Откуда они подставляются непонятно.
Не работает. Вообще никак не реагирует.
Может потому-что сайт на статичном штмл.
должно работать, можете дать ссылку на сайт?
Подскажите, пожалуйста, а как сделать два видео с ютуба в ряд? Когда делаю один по Вашему принципу, то все отлично, а когда два, то показывается только один
попробуйте добавить контейнерам свойство display: inline-block или же в некоторых случаях лучше использовать float: left . если на вашем сайте подключен bootstrap то добавьте просто классы для контейнеров col-sm-6 (каждому)
Спасибо за информацию Теперь видео тоже стало адаптивным:) а то сайт на мобилах был кривым.
У меня не получается таким методом: когда вставляю видео в контейнер, на странице тоже меняется его размер, оно становится узким и длинным. А при просмотре на мобильной версии всё теперь хорошо. Что делать, уже не знаю, много методов перепробовала… В чём причина может быть?
В редакторе моей темы сейчас так:
.post-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
font-size:.9em;
margin-bottom: 15px;
}
.post-video iframe,
.post-video object,
.post-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
На сайте видео норм., а на мобильной версии не уменьшается и появляется полоса прокрутки
ответил вам на e-mail
Здравствуйте!
На мобильной теперь корректно отображается, но на ПК довольно крупно.
попробуйте ограничить контейнер через max-width
Добрый день! Могли бы Вы помочь мне решить такой вопрос:
Сайт адаптивный, вставляю прямо в записи через код лендинги товарных партнерок. width=”1700″ при этом адаптируется, а height=”1000″ приходится подгонять по высоте путем подбора вручную, но, после оправки заявки, остается большое пустое пространство.
Как сделать эту высоту адаптивной содержимому фрейма?
P.S. Сайт на движке вордпресс
ответил вам на емейл
Здравствуйте, а как сделать ограничение, чтобы видео при просмотре на компьютере не было на всю страницу? А так всё масштабируется.
вам нужно либо поставить max-width – для этого блока, либо использовать медиа запросы для определенных расширений, и уже там прописывать max-width
Большое спасибо, помогло.
Дмитрий, а почему получается, что сам блок видео идёт как надо, в размере 560 х 315 px, но есть белое поле (судя по размеру этого поля, это как раз размер видео, если бы оно было в полную ширину) http://livreklama.ru/klad
потому что паддинг ботом выставляется в процентах. а проценты величина относительная а не фиксированная, она зависит от того в каком контейнере находится.
ну и плюс контейнер див по умолчанию растягивается на 100%, то есть на всю доступную ширину
Сделал див на нужную ширину, и всё работает. Спасибо.
Спасибо, отец!
Все работает.
Рад, что статья Вам пригодилась 😉
спасибо, работает отлично!
Добрый день
На ПК все работает, а вот
на мобильной версии не уменьшается и появляется полоса прокрутки
почитайте комментарии, может у вас схожая проблема
Автор – молодец! код работает. Спасибо.
Большое спасибо! У меня на сайте код работает!
Уже все перепробовала….не работает(( может туплю?
а вы всё сделали как в статье?
Да,проверила несколько раз
Оборачиваю видео с ютуб в контейнер div,
В CSS файл добавил код из статьи, но на мобильных устройствах ничего не поменялось. В чем может быть проблема?
.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
И видео вообще перестало отображаться на сайте!
1. убедитесь что у вас нет больше стилей для класса youtube
2. убедитесь что в хтмл используется вложенность div class=”youtube” -> ifame …
3. убедитесь что у вас обновлен кэш сайта или браузера – Ctrl+F5
Все получилось! Спасибо.
А можно ли для отображения на десктопе уменьшить видео по ширине? а то на всю ширину сразу на большом экране не очень выходит
можно, если вы используете bootstrap написать отдельные стили используя медиа-запросы:
@media (min-width: 1200px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (max-width: 767px) {}
Здравствуйте, а это решение еще работает? Посмотрите пожалуйста, скопировано через поделиться, однако, у меня просто iframe(((((
pechnoydom.ru/products/keramicheskij-kamin-laponie-4012
в мобильной версии беда не получается сделать его просто в ширину страницы.
даже на боди овервлоу-х хидден не помогает горизонтальную прокрутку убрать(
Здравствуйте, так у вас видео находится в теге p, а вам нужно, как на примере, оберунть его в div с тем классом что написал. Также, добавить в свои стили – стили со статьи.
Супер! Спасибо! Перечитала много статей, пробовала различные способы – и только Ваша статья помогла!
Спасибо за комментарий 🙂
Дмитрий, спасибо. UPDATE работает, как говорится, из коробки.
С размещением двух видео на одной линии, слева и справа в блоке, вопрос решил через упаковку в таблицу, без этого при сужении экрана одно из видео почему-то пропадало.
Вопрос в другом, почему изначально в коде не поставить 1000px вместо 640 ?
@media (max-width: 640px) {
для случаев, когда например и не мобильный телефон, но и не стандартный широкоформатный монитор. По-сути мы ничего от этого не теряем, просто плейер начнет менять свои размеры более гибко, подстраиваясь раньше.
Можно и 1000px, просто на некоторых сайтах вариант с 640 смотрелся более лаконично 🙂 Ваш вариант тоже подойдет
Нужна Ваша помощь с CSS. Попробовал Ваш вариант, ничего не поменялось. Может быть у меня в другом проблема? Помогите пожалуйста
Напишите мне на dmitriyribka@gmail.com , постараюсь помочь.