Как сделать так, чтобы плеер YouTube масштабировался по ширине страницы, но при этом сохранял соотношение сторон?

Question

У меня есть видео YouTube, которое я хочу разместить на своей веб-странице.

Я хочу масштабировать видео, чтобы оно соответствовало проценту браузера пользователя, но также сохраняло соотношение сторон

Я пробовал это:

<iframe width="87%" height="315" src="http://www.youtube-nocookie.com/embed/dU6OLsnmz7o" frameborder="0" allowfullscreen></iframe>

Но это только делает игрока шире, а не выше.

Нужно ли прибегать к JavaScript (или нестандартному CSS)?

Answer 1

Что я считаю лучшим решением CSS.

.auto-resizable-iframe {
  max-width: 420px;
  margin: 0px auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

<div class="auto-resizable-iframe">
  <div>
    <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
  </div>
</div>

Демо http://jsfiddle.net/JBhp2/

Answer 2

Я столкнулся с похожей проблемой с моим сайтом при разработке адаптивного CSS. Я хотел, чтобы любые встроенные объекты Youtube изменяли размеры, с аспектом, при переключении с настольного CSS на что-то меньшее (я использую медиазапросы для повторного рендеринга контента для мобильных устройств).

Решение, на котором я остановился, было на основе CSS и разметки. По сути, у меня есть три класса видео в моем CSS, таким образом:

.video640 {width: 640px; height: 385px}
.video560 {width: 560px; height: 340px}
.video480 {width: 480px; height: 385px}

… и я назначаю один из них содержимому Youtube, которое я включаю, в зависимости от его исходного размера (вам может понадобиться больше классов, я просто выбрал наиболее распространенные размеры).

В CSS медиазапроса для небольших устройств эти же классы просто переформулированы так:

.video640 {width: 230px; height: 197px}
.video560 {width: 230px; height: 170px}
.video480 {width: 240px; height: 193px}

Я ценю, что это требует некоторой разметки "заранее" при включении видео в ваш HTML (то есть добавление класса), но если вы не хотите идти по маршруту Javascript, это работает довольно хорошо - вы мог бы переопределить ваши классы видео для столько разных размеров, сколько вам требуется. Вот как выглядит разметка Youtube:

<object class="video640" type="application/x-shockwave-flash" value="YOUTUBE URL">
  <param name="movie" value="YOUTUBE URL"></param>
</object>

Answer 3

Довольно просто с некоторыми JavaScript.

jQuery(function() {
    function setAspectRatio() {
      jQuery('iframe').each(function() {
        jQuery(this).css('height', jQuery(this).width() * 9/16);
      });
    }

    setAspectRatio();   
    jQuery(window).resize(setAspectRatio);
});

Answer 4

Этот плагин jQuery делает обходы в последнее время, он называется FitVids и делает именно то, что вам нужно, изменяет размер видео в зависимости от размера браузера, сохраняя соотношение сторон.

http://fitvidsjs.com/

Answer 5

Хитрость для автоматического изменения размера видео на YouTube заключается в том, чтобы сделать ширину iframe 100% и поместить ее в div с «padding-bottom», равным соотношению сторон в процентах. Э.Г.

Но проблема в том, что у вас уже будет много страниц со встроенными видео на YoutTube. Вот плагин jquery, который будет сканировать все видео на странице и автоматически изменять их размер, изменяя код iframe, как указано выше. Это означает, что вам не нужно менять код. Включите JavaScript, и все ваши видео на YouTube станут автоматически изменять размер. https://skipser.googlecode.com/files/youtube-autoresizer.js

Answer 6

Вы можете использовать два класса, которые будут масштабировать размер видео в зависимости от размера упаковочного div. Рассмотрим этот пример:

<div class="content-wrapper">
    <div class="iframe-wrapper res-16by9">   
        <iframe src="https://www.youtube.com/embed/pHsYFURtzzY" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Теперь посмотрите на CSS.

.content-wrapper{
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
}

.iframe-wrapper{
  width: 100%;
  position: relative;
}

.res-4by3{
  padding-bottom: 75%;
}

.res-16by9{
  padding-bottom: 56.25%;
}

.iframe-wrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Обратите внимание, что вам придется обернуть iframe в div, ширина которого установлена ​​на 100%, а позиция установлена ​​на относительное. Вы также должны добавить нижний отступ в оболочку iframe. Этот отступ будет определять высоту видео. Я рекомендую создать два класса, которые будут представлять соотношение изображений.

Довольно просто вычислить правый нижний отступ для оберток, которые представляют определенное разрешение. Например, для разрешений 4 на 3 и 16 на 9 нижний отступ будет равен:

[4/3 res]

100/4 * 3 = 75%;

[16/9 res]

100/16 * 9 = 56,25%

Затем поместите iframe как абсолютный и сдвиньте его в верхний левый угол разделительной рамки. Также обязательно установите ширину и высоту iframe на 100%. Теперь вам нужно сделать еще одну вещь. Вы сделали.

Добавьте класс, который подходит вам по размеру. Он масштабирует ширину и высоту изображения соответственно, сохраняя правильные пропорции на месте.

Пример выше работает для любого iframe. Это означает, что вы также можете использовать его для карт Google iframe.

Answer 7

Старый вопрос, но я думаю, что теги @media CSS 3 были бы полезны в этом случае.

Вот мое решение аналогичной проблемы.

CSS:

@media only screen and (min-width: 769px) {
    .yVid {
        width: 640px;
        height: 360px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .yVid {
        width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

HTML:

<div class="yVid">
    <iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>

В основном это добавляет точку останова на 768px, где размер видео изменяется самостоятельно.Вы также можете добавить точки останова на 992 и 1280 для еще более отзывчивого размера видео.(числа основаны на стандартных размерах Bootstrap).

Answer 8

Просто установите высоту и ширину iframe с помощью метрики CSS vw. В качестве параметра используется ширина устройства:

.videoWrapper iframe {
    height: 36.6vw;
    width: 65vw; 
}

Answer 9

В списке ответов есть несколько предложений по использованию js для изменения структуры сгенерированного iframe.Я думаю, что в этом есть риск, потому что, когда вы оборачиваете iframe внутри других элементов, возможно, API YouTube потеряет «связь» с iframe (особенно если вы передаете элемент как узел вместо использования определенного идентификатора, подобного мне),Лучше обойти это на самом деле, используйте javascript для изменения содержимого, прежде чем вы фактически запустите проигрыватель YouTube.

фрагмент из моего кода:

/**
 * Given the player container, we will generate a new structure like this
 *
 * <div class="this-is-the-container">
 *      <div class="video-player">
 *          <div class="auto-resizable-iframe">
 *              <div>
 *                  <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM">        </iframe>
 *              </div>
 *          </div>
 *      </div>
 * </div>
 *
 * @return {Node} the real player node deep inside
 */
YouTube.renderResizable = function (playerContainer) {
    // clean up the content of player container
    playerContainer.textContent = '';

    var playerDiv = document.createElement('div');
    playerDiv.setAttribute('class', 'video-player');

    playerContainer.appendChild(playerDiv);

    // add the auto-resizable-frame-div
    var resizeableDiv = document.createElement('div');
    resizeableDiv.setAttribute('class', 'auto-resizable-iframe');

    playerDiv.appendChild(resizeableDiv);

    // create the empty div
    var div = document.createElement('div');
    resizeableDiv.appendChild(div);

    // create the real player
    var player = document.createElement('div');
    div.appendChild(player);

    return player;
};

Answer 10

Вот что у меня сработало. Это слегка измененный код из Генератора встроенного кода YouTube .

CSS:

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    }
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

HTML:

<div class="video-container">
    <iframe width="560px" height="315px" src="https://www.youtube.com/embed/XXXXxxxx?&theme=dark&autohide=2&iv_load_policy=3"><iframe>
</div>