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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

http://fitvidsjs.com/

Ответ 5

Трюк, чтобы сделать видеоизображение видео youtube, заключается в том, чтобы сделать ширину iframe 100% и поместить ее в div с "padding-bottom", равным пропорции в процентах. Например.

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

• избегать нижнего поля
• максимальная ширина для больших экранов
• минимизировать высоту в мобильном представлении
• сохранить фиксированный размер для @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;
    }       

}       

Ответ 10

Это то, что сработало для меня. Это слегка измененный код из 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>

Ответ 11

В списке ответов на использование js есть несколько предложений по изменению структуры сгенерированного iframe. Я думаю, что есть риск с этим, потому что, когда вы завершаете iframe внутри других элементов, возможно, что API YouTube потеряет "соединение" с iframe (особенно если вы передадите элемент в качестве node вместо использования определенного идентификатора, например меня). Скорее всего, чтобы обойти это, используйте 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;
};

Ответ 12

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

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

Ответ 13

Добавить код JavaScript, чтобы дать каждому iTrame iTrame класс:

$('iframe[src*="youtube"]').addClass('youtube')

Затем в Media Queries используйте ваш класс трубки для установки другого размера.

.youtube {
   /* Do stuff here */
}

Легче и оптимизировано для CMS, чем руководство.