У меня есть видео с YouTube, встроенное на наш веб-сайт, и когда я уменьшаю экран до размеров планшета или телефона, он перестает уменьшаться примерно до 560 пикселей в ширину. Это стандарт для видео на YouTube или я могу добавить что-нибудь в код, чтобы уменьшить размер?
125
Ответы:
Вы можете сделать видео на YouTube адаптивными с помощью CSS. Оберните iframe в div с классом videowrapper и примените следующие стили:
Div .videowrapper должен находиться внутри отзывчивого элемента. Заполнение .videowrapper необходимо, чтобы видео не сворачивалось. Возможно, вам придется настроить числа в зависимости от вашего макета.
источник
56.25%
и25px
может быть прочитано на alistapart.com/article/creating-intrinsic-ratios-for-videopadding-bottom: 56.25%
: Для того, чтобы создать 16: 9, мы должны разделить 9 на 16 (0.5625 или 56,25%).padding-top: 25px
: Чтобы избежать проблем с моделью сломанного ящика (IE5 или IE6 в режиме quirks), мы используем padding-top, а не высоту, чтобы создать место для хрома.Если вы используете Bootstrap, вы также можете использовать адаптивное встраивание. Это полностью автоматизирует адаптивность видео (ов).
http://getbootstrap.com/components/#responsive-embed
Ниже приведен пример кода.
источник
col-sm-8 col-sm-offset-2
Я использовал CSS в принятом ответе здесь для своих адаптивных видео на YouTube - отлично работал до тех пор, пока YouTube не обновил свою систему примерно в начале августа 2015 года. Видео на YouTube имеют те же размеры, но по какой-то причине CSS в принятом ответе сейчас почтовые ящики все наши видео. Черные полосы сверху и снизу.
Я пробежался по размерам и решил избавиться от верхнего отступа и заменить нижний отступ на
56.45%
. Вроде хорошо выглядит.источник
Доработанное решение только для Javascript для YouTube и Vimeo с использованием jQuery.
Простота использования с помощью только вставки:
Или с помощью адаптивного стилевого фреймворка, такого как Bootstrap.
width="16" height="9"
)*=
селектор подстроки jQuery вместо начала строки^=
Спасибо @Dampas за отправную точку. https://stackoverflow.com/a/33354009/1011746
источник
Это старый поток, но я нашел новый ответ на https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Проблема с предыдущим решением заключается в том, что вам нужен специальный div для видеокода, который не подходит для большинства случаев. Итак, вот решение JavaScript без специального div.
источник
Решение @ magi182 надежное, но в нем отсутствует возможность установить максимальную ширину. Я думаю, что необходима максимальная ширина 640 пикселей, потому что в противном случае миниатюра YouTube выглядит пиксельной.
Мое решение с двумя обертками работает для меня как шарм:
Я также установил padding-bottom во внутренней обертке на 50%, потому что с 56% @ magi182 появилась черная полоса сверху и снизу.
источник
С кредитами на предыдущий ответ https://stackoverflow.com/a/36549068/7149454
Совместимость с Boostrap, настройте ширину контейнера (в этом примере 300 пикселей), и все готово:
источник
См. Полную суть здесь и живой пример здесь .
resizeHeroVideo вызывается только после полной загрузки проигрывателя Youtube (загрузка страницы не работает) и всякий раз, когда изменяется размер окна браузера. При запуске он вычисляет высоту и ширину iframe и присваивает соответствующие значения, сохраняя правильное соотношение сторон. Это работает независимо от того, изменяется ли размер окна по горизонтали или вертикали.
источник
Ладно, похоже на большие решения.
Почему бы не добавить
width: 100%;
прямо в iframe. ;)Итак, ваш код будет выглядеть примерно так
<iframe style="width: 100%;" ...></iframe>
Попробуйте, это сработает, как в моем случае.
Наслаждайтесь! :)
источник
Я делаю это с помощью простого CSS следующим образом
HTML КОД
КОД CSS
источник