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里面的iframe

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

这样，视频将在所有屏幕宽度上很好地缩放。

如果视频维度可能会有所不同，那么有一个更复杂的方法涉及到一些JS：http://css-tricks.com/fluid-width-youtube-videos/

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

1 个答案: