我正在尝试在响应式设计网页上使用 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>
我可以为此链接向每个查询添加不同的参数吗?
最佳答案
为此,您需要使用 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/
关于css - 使用 CSS 媒体查询改变 YouTube 视频质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16579586/