在这个页面上,我有一个嵌入的 YouTube 视频,它(最终)将位于一个宽度可变的容器中。当我在没有容器的情况下放入它时,纵横比很好。当我将它放入容器中时,视频高度远远超过了正常的纵横比(见屏幕截图)。
相关代码如下:
.video-container {
display: block;
float: left;
width: 74.05rem;
margin-left: 1.1rem;
margin-right: 1.1rem;
margin-right: 0;
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0; }
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
我做的时候引用了这篇文章,所以如果有更好的方法,请大家大声说出来! http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
作为引用,目前位于 http://www.idealbrandon.com/ksu2。
最佳答案
我相信您所指的文章使用 jQuery 来实现您想要的效果。这是他们为 iframe 发布的脚本
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
关于html - 嵌入式 youtube 视频的奇怪高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21714104/