嵌入式youtube视频响应式解决方案
嵌入式youtube视频响应式解决方案
提问于 2016-04-04 07:16:08
有没有人能帮我：
我试图制作一个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 "：将视频向下推:视频在我的页面顶部，它应该在显示“为什么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%的宽度和响应性，同时保持其纵横比放置在下面的“为什么凯文库尔布斯室内酒吧？”？
回答 4
Stack Overflow用户
发布于 2019-03-22 00:52:21
这是我找到的解决方案：
HTML：
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe>
</div>CSS：
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Stack Overflow用户
发布于 2016-04-04 16:51:39
在这种情况下，您可以使用iframe的计算高度。它是根据youtube视频iframe的页面宽度和默认长宽比计算得出的。
iframe {
width: 100%;
top: 5px;
margin-bottom: -5px;
height: calc(100vw*(315/560));
}Stack Overflow用户
发布于 2016-04-04 16:57:29
当我之前做过响应式视频时，我就用过这段jQuery。当屏幕调整大小时，它会计算高度应该是多少。
<script>
var $allVideos = $("iframe[src^='https://player.vimeo.com'], iframe[src^='http://player.vimeo.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
$allVideos.each(function() {
$fluidEl = $(this).parent();
var newWidth = $fluidEl.width();
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36392438
复制相关文章
相似问题
腾讯云开发者
