Зменшіть відео YouTube на чутливу ширину

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

Ви можете зробити відео YouTube чуйним за допомогою CSS. Загорніть кадр iframe у діві з класом "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%;
}

.Videowrapper div має бути всередині чуйного елемента. Прокладка на .videowrapper необхідна для запобігання руйнуванню відео. Можливо, вам доведеться підробити цифри залежно від вашого макета.

Якщо ви використовуєте 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>

Я використовував 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();
});

Простий у використанні лише з вбудовою:

<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>

• Покладається на ширину та висоту рамки рамки, щоб зберегти співвідношення сторін
• Можна використовувати співвідношення сторін для ширини та висоти ( width="16" height="9")
• Зачекає, поки документ буде готовий до зміни розміру
• Використовує *=селектор підстрокових jQuery замість початку рядка^=
• Отримує опорну ширину від батьківського iframe-батька замість попередньо визначеного елемента
• Рішення Javascript
• Немає CSS
• Не потрібна обгортка

Дякуємо @Dampas за початкову точку. https://stackoverflow.com/a/33354009/1011746

Це стара нитка, але я знайшов нову відповідь на https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Проблема попереднього рішення полягає в тому, що вам потрібно мати спеціальний розділ навколо відео-коду, який не підходить для більшості застосувань. Отже, ось рішення JavaScript без спеціальних діл.

// 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 є твердим, але йому не вистачає можливості встановити максимальну ширину. Я думаю, що необхідна максимальна ширина 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>

Я також встановив нижню частину прокладки у внутрішній обгортці на 50%, тому що з 56% @ magi182 з'явилася чорна смуга зверху і знизу.

З кредитами до попередньої відповіді https://stackoverflow.com/a/36549068/7149454

Сумісний із завантаженням, змініть ширину контейнера (300px у цьому прикладі), і ви готові:

<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>

Дивіться повну суть тут і живий приклад тут .

#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 (завантаження сторінки не працює), і кожного разу, коли зміниться вікно браузера. Під час запуску він обчислює висоту та ширину рамки і призначає відповідні значення, підтримуючи правильне співвідношення сторін. Це працює, незалежно від зміни розміру вікна по горизонталі чи вертикалі.

Гаразд, виглядає як великі рішення.

Чому б не додати width: 100%;безпосередньо у свій iframe. ;)

Так ваш код виглядав би приблизно так <iframe style="width: 100%;" ...></iframe>

Спробуйте це спрацює так, як працювало в моєму випадку.

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

Я роблю це за допомогою простого 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;

}