使用 CSS 媒体查询改变 Youtube 视频质量

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 或 p）并将其设置为

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/