Уменьшите видео YouTube до адаптивной ширины

125

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

MattM
источник
1
Хороший ресурс для создания вашего адаптивного
ThisClark

Ответы:

268

Вы можете сделать видео на YouTube адаптивными с помощью CSS. Оберните iframe в div с классом 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 необходимо, чтобы видео не сворачивалось. Возможно, вам придется настроить числа в зависимости от вашего макета.

magi182
источник
Спасибо! Мне пришлось добавить ширину: 100% к моему #content, чтобы убедиться, что это отзывчивый элемент.
MattM
6
См. Также: css-tricks.com/NetMag/FluidWidthVideo/…
Blazemonger
1
в моем случае видео не появляется при применении этого CSS.
basZero 01
5
подробно объяснение числа 56.25%и 25pxможет быть прочитано на alistapart.com/article/creating-intrinsic-ratios-for-video padding-bottom: 56.25% : Для того, чтобы создать 16: 9, мы должны разделить 9 на 16 (0.5625 или 56,25%). padding-top: 25px: Чтобы избежать проблем с моделью сломанного ящика (IE5 или IE6 в режиме quirks), мы используем padding-top, а не высоту, чтобы создать место для хрома.
Tun
Вы можете посмотреть пример iframe на YouTube Здесь @ http://alistapart.com/d/creating-intrinsic-ratios-for-video/example4.html
Виньеш Чиннайян
27

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

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

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

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
illage4
источник
1
стоит добавить, что вы должны вставить их внутрь некоторых col-sm ... и т. д., чтобы не сделать видео полной шириной.
рассвет
1
Это потрясающе
jastr
Кроме того, чтобы видео оставалось по центру, не забывайте использовать смещение. Например:col-sm-8 col-sm-offset-2
Николас
9

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

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

.videowrapper {
    position: relative;
    padding-bottom: 56.45%;
    height: 0;
}
McNab
источник
1
Просто обновление по этому поводу - иногда старые изображения-заполнители, используемые в видео, создают впечатление, что сверху и снизу все еще есть черные полосы, но сами видео выглядят хорошо с этой новой настройкой, когда вы фактически начинаете их воспроизводить. Grrr, спасибо YouTube.
Макнаб,
1
Спасибо. Использование padding-bottom: 50% позволяет избавиться от верхней и нижней черных полос для видео, которое я использую, хотя кажется, что миниатюра и само видео имеют несовпадающие соотношения сторон ...
MSC
8

Доработанное решение только для 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();
});

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

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>

Или с помощью адаптивного стилевого фреймворка, такого как Bootstrap.

<div class="row">
  <div class="col-sm-6">
    Stroke Awareness
  <div class="col-sm-6>
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  • Для сохранения соотношения сторон зависит от ширины и высоты iframe.
  • Можно использовать соотношение сторон для ширины и высоты ( width="16" height="9")
  • Ждет, пока документ будет готов, перед изменением размера
  • Использует *=селектор подстроки jQuery вместо начала строки^=
  • Получает контрольную ширину из родительского элемента iframe видео вместо предопределенного элемента
  • Решение Javascript
  • Нет CSS
  • Обертка не требуется

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

mindriot
источник
Прекрасно работает! Большое спасибо :)
Ларан Эванс
Это помогает. Особенно в тех случаях, когда у вас нет контроля над HTML-элементами (кроме JS) и вы не можете установить видеоролик. Спасибо.
Кай Ноак
Обратите внимание, что это решение связывает событие изменения размера с функцией JavaScript, что может вызвать нагрузку на браузер по мере добавления новых событий. Помните, что вы можете использовать JavaScript, чтобы обернуть iframe в оболочку div, чтобы CSS обрабатывал адаптивный стиль и повышал производительность.
Railgun
Я пробовал много решений. Это лучшее решение в Интернете, чтобы сделать видео YouTube адаптивным.
Дэн Ник
1

Это старый поток, но я нашел новый ответ на 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
Dampas
источник
1

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

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

.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%;
}
<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

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

Паскаль Кляйн
источник
Это сработало лучше для меня, пытаясь встроить адаптивное видео, но указав ширину (max-width).
yougotiger 08
1

С кредитами на предыдущий ответ https://stackoverflow.com/a/36549068/7149454

Совместимость с Boostrap, настройте ширину контейнера (в этом примере 300 пикселей), и все готово:

<div class="embed-responsive embed-responsive-16by9" style="height: 100 %; width: 300px; ">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/LbLB0K-mXMU?start=1841" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe>
</div>
Ник Ковальский
источник
0

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

#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%; }

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

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 (загрузка страницы не работает) и всякий раз, когда изменяется размер окна браузера. При запуске он вычисляет высоту и ширину iframe и присваивает соответствующие значения, сохраняя правильное соотношение сторон. Это работает независимо от того, изменяется ли размер окна по горизонтали или вертикали.

davidcondrey
источник
-1

Ладно, похоже на большие решения.

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

Итак, ваш код будет выглядеть примерно так <iframe style="width: 100%;" ...></iframe>

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

Наслаждайтесь! :)

Умеш Патил
источник
5
Поскольку при этом высота видео изменяется неправильно и, следовательно, отображаются элементы управления и черные полосы, принятый ответ - лучшее решение
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ
Поскольку это отправная точка для создания адаптивных видео со встроенными фреймами, я считаю, что это решение правильно отвечает на вопрос. Объедините это с сеткой, и высота будет единственной проблемой. => (ширина контейнера / 12) * 9 = высота.
Тим Вермален
-2

Я делаю это с помощью простого CSS следующим образом

HTML КОД

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe>

КОД CSS

<style type="text/css">
#vid {

max-width: 100%;
height: auto;

}


источник