Изменение качества видео Yotube с использованием запросов в формате CSS

Question

Я пытаюсь использовать iframe для встраивания Youtube видео на отзывчивую веб-страницу дизайна. Как я могу позволить самой широкой странице поставляться с видео более высокого разрешения (с параметром &vq=hd1080)?

Теперь у меня есть медиа-запроса CSS скрипты:

@media screen and (min-width : 1000px) { 
    .video{width:700px; height:500px;} 
} 
@media screen and (max-width: 1000px) and (min-width : 750px) { 
    .video{width:450px; height:300px; } 
} 
@media screen and (max-width: 750px) { 
    .video{width:260px; height:180px; } 
} 

и связь:

<div class="video" style="float:left;"> 
    <iframe type="text/html" width="100%" height="100%" 
    src="http://www.youtube.com/embed/xxxxxxxx?version=3&rel=0" 
    frameborder="0" allowfullscreen></iframe> 
</div> 

Могу ли я поставить различные параметры для этой ссылки на каждый запрос?

Answer 1

Для этого вам нужно использовать что-то вроде JavaScript. Это не работа для CSS.

Однако есть гораздо более простой способ изменить размер этих видео в зависимости от размера экрана. Предположим, ваши видео всегда имеют одинаковое соотношение ширины и высоты, и, допустим, это соотношение составляет 16: 9. В этом случае, оберните элемент вокруг видео (в DIV или р, например) и установить его на

position: relative; 
height: 0; 
padding-bottom: 56.25%; 
overflow: hidden; 

и IFrame внутри него, чтобы

width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 

Таким образом, видео будет масштабироваться красиво на всех ширинах экрана.

Если видео размеры могут меняться, есть более сложный метод для этого, что включает в себя некоторые JS: http://css-tricks.com/fluid-width-youtube-videos/