2

我正在尝试在响应式设计网页上使用 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>

我可以将此链接的不同参数放入每个查询吗？

4

1 回答 1

2

您需要为此使用 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/

于 2013-05-16T06:22:20.210 回答