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

Question

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

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

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

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

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

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

Answer 1

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

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

}       

Answer 2

Добавьте код JavaScript, чтобы присвоить каждому YouTube iFrame класс:

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

Затем в медиазапросах используйте класс you tube, чтобы установить другой размер.

.youtube {
   /* Do stuff here */
}

Проще иоптимизирован для CMS, чем вручную.

Answer 3

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