任何人都可以帮助我:
我试图制作一个100%宽度和响应的嵌入youtube视频,我在这个网站上发现这个代码试图完成这个:
http://avexdesigns.com/responsive-youtube-embed/
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
使用代码:视频甚至没有显示:所以我将溢出隐藏在代码中并将“padding-top”更改为“top”:将视频向下推:视频位于我的页面顶部它应该低于它所说的“为什么kevin Kurbs室内设计/观看下面的视频?”
要部分获取视频我希望它出现的方式,我从我的html中删除并相应地调整iframe:
iframe {
width: 100%;
top: 5px;
margin-bottom: -5px
}
视频代码来自288-304
http://graph-art.matc.edu/harrisd5/vicom126/a2/index.html
通过执行此操作,只需使视频播放时youtube缩略图封面照片响应,它就是中心 . 那么我如何让这个视频100%宽度和响应,同时保持其宽高比位于“为何凯文库尔布斯室内酒吧?” ?
3 回答
在这种情况下,您可以使用iframe的计算高度 . 它是根据youtube视频iframe的页面宽度和默认宽高比计算的 .
当我之前完成自适应视频时,我已经使用了这一点jQuery . 调整屏幕大小时,它会计算高度应该是多少 .
这是CSS代码:
以下是HTML代码:
资料来源: Make YouTube Embed Video Responsive Using CSS