it-roy-ru.com

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

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

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

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

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

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

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

34
Frank

Я столкнулся с похожей проблемой с моим сайтом при разработке адаптивного 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>
15
Ben

То, что я считаю лучшим решением 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/

62
Darwin

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

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

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

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

http://fitvidsjs.com/

10
Ben Everard

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

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

2
arunskrish

Вы можете использовать два класса, которые будут масштабировать размер видео в зависимости от размера упаковочного 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. 

1
DevWL

Старый вопрос, но я думаю, что теги @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). 

1
todd.pund

Это то, что сработало для меня. Это слегка измененный код из YouTube Embed Code Generator .

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

В дополнение к Дарвину и Тодду, следующее решение 

  1. избегать нижнего поля
  2. максимизировать ширину для больших экранов 
  3. минимизировать высоту в мобильном представлении
  4. сохранить фиксированный размер для @media не совместимых браузеров 

HTML:

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

CSS:

.videoplayer{

    text-align: center;
    vertical-align: middle;

    background-color:#000000;

    margin: 0;
    padding: 0;

    width: 100%;
    height:420px;

    overflow:hidden;

    top: 0;
    bottom: 0;

}

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

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

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


//full screen
@media (min-width:0px) {

    .videoplayer{
        height:100%;
    }

    .auto-resizable-iframe > div {
        padding-bottom:100%;
    }           

}

//mobile/pad view
@media (min-width:600px) {

    .videoplayer{
        height:420px;
    }

    .auto-resizable-iframe > div {
        padding-bottom:420px;
    }       

}       
0
RafaSashi

Вы можете использовать style="max-width: %87; max-height: %87;"

0
Umur Kontacı

В списке ответов есть несколько предложений по использованию 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;
};
0
mr1031011