Утратите видео YouTube на гибкую ширину

У меня есть видеоролик YouTube, встроенный на нашем веб-сайте, и когда я сжимаю экран до размеров планшета или телефона, он перестает сокращаться шириной около 560 пикселей. Является ли этот стандарт для видео на YouTube или есть что-то, что я могу добавить в код, чтобы он стал меньше?

Вы можете настроить видеоролики YouTube с помощью CSS. Оберните iframe в div с classом «videowrapper» и примените следующие стили:

.videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Div .videowrapper должен находиться внутри чувствительного элемента. Прокладка на .videowrapper необходима, чтобы видео не рухнуло. Возможно, вам придется настроить номера в зависимости от вашего макета.

Если вы используете Bootstrap, вы также можете использовать отзывчивую вставку. Это полностью автоматизирует процесс реагирования видео (ов).

http://getbootstrap.com/components/#responsive-embed

Ниже приведен пример кода ниже.

  

Я использовал CSS в принятом ответе здесь для моих отзывчивых видео на YouTube – отлично работал до тех пор, пока YouTube не обновил свою систему в начале августа 2015 года. Видео на YouTube – это те же размеры, но по какой-либо причине CSS в принятом ответе теперь почтовые ящики всех наших видеороликов. Черные полосы сверху и снизу.

Я пошатнулся с размерами и решил избавиться от верхнего заполнения и сменил нижнее дополнение на 56.45% . Кажется хорошо выглядеть.

 .videowrapper { position: relative; padding-bottom: 56.45%; height: 0; } 

Усовершенствованное решение Javascript для YouTube и Vimeo с помощью jQuery.

 // -- After the document is ready $(function() { // Find all YouTube and Vimeo videos var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']"); // Figure out and save aspect ratio for each video $allVideos.each(function() { $(this) .data('aspectRatio', this.height / this.width) // and remove the hard coded width/height .removeAttr('height') .removeAttr('width'); }); // When the window is resized $(window).resize(function() { // Resize all videos according to their own aspect ratio $allVideos.each(function() { var $el = $(this); // Get parent width of this video var newWidth = $el.parent().width(); $el .width(newWidth) .height(newWidth * $el.data('aspectRatio')); }); // Kick off one resize to fix all videos on page load }).resize(); }); 

Прост в использовании с только встраиванием:

  

Или с адаптивной структурой стиля, такой как Bootstrap.

 
Stroke Awareness
  • Опирается на ширину и высоту iframe, чтобы сохранить соотношение сторон
  • Может использовать соотношение сторон для ширины и высоты ( width="16" height="9" )
  • Ожидает, пока документ не будет готов до изменения размера.
  • Использует подстроку jQuery *= селектор вместо начала строки ^=
  • Возвращает ширину ссылки от родителя видео iframe вместо предопределенного элемента
  • Решение Javascript
  • Нет CSS
  • Не требуется обертка

Спасибо @Dampas за отправную точку. https://stackoverflow.com/a/33354009/1011746

Это старый stream, но я нашел новый ответ на https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Проблема с предыдущим решением заключается в том, что вам нужно иметь специальный div вокруг видеокода, который не подходит для большинства целей. Итак, вот решение JavaScript без специального div.

 // Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!! var $allVideos = $("iframe[src^='https://www.youtube.com']"), // The element that is fluid width $fluidEl = $("body"); // Figure out and save aspect ratio for each video $allVideos.each(function() { $(this) .data('aspectRatio', this.height / this.width) // and remove the hard coded width/height .removeAttr('height') .removeAttr('width'); }); // When the window is resized $(window).resize(function() { var newWidth = $fluidEl.width(); // Resize all videos according to their own aspect ratio $allVideos.each(function() { var $el = $(this); $el .width(newWidth) .height(newWidth * $el.data('aspectRatio')); }); // Kick off one resize to fix all videos on page load }).resize(); // END RESIZE VIDEOS 

Решение @ magi182 твердое, но ему не хватает возможности устанавливать максимальную ширину. Я думаю, что максимальная ширина 640px необходима, потому что otherwhise миниатюра youtube выглядит pixelated.

Мое решение с двумя обертками работает как прелесть для меня:

 .videoWrapperOuter { max-width:640px; margin-left:auto; margin-right:auto; } .videoWrapperInner { float: none; clear: both; width: 100%; position: relative; padding-bottom: 50%; padding-top: 25px; height: 0; } .videoWrapperInner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Я также установил нижнюю часть внутренней обертки на 50%, потому что с 56% @ magi182 появилась черная полоса сверху и снизу.

См. Полный текст здесь и живой пример здесь .

 #hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; } .videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; } 

 

 var player = null; $( document ).ready(function() { resizeHeroVideo(); } ); $(window).resize(function() { resizeHeroVideo(); }); function resizeHeroVideo() { var content = $('#hero'); var contentH = viewportSize.getHeight(); contentH -= 158; content.css('height',contentH); if(player != null) { var iframe = $('.videoWrapper iframe'); var iframeH = contentH - 150; if (isMobile) { iframeH = 163; } iframe.css('height',iframeH); var iframeW = iframeH/9 * 16; iframe.css('width',iframeW); } } 

resizeHeroVideo вызывается только после полной загрузки проигрывателя Youtube (при загрузке страницы не работает) и при изменении размера windows браузера. Когда он запускается, он вычисляет высоту и ширину iframe и присваивает соответствующие значения, поддерживающие правильное соотношение сторон. Это работает независимо от того, изменяется ли окно горизонтально или вертикально.

Хорошо, похоже, большие решения.

Почему бы не добавить width: 100%; прямо в вашем iframe. 😉

Таким образом, ваш код будет выглядеть как

Попытайтесь, это сработает, поскольку это сработало в моем случае.

Наслаждайтесь! 🙂

Я делаю это с простым css следующим образом

HTML-код

  

CSS-код

  

Давайте будем гением компьютера.