嵌入式 YouTube 视频布局问题答案

【问题标题】：embedded YouTube video layout issue嵌入式 YouTube 视频布局问题
【发布时间】：2012-12-16 23:02:44
【问题描述】：

在this page 上，嵌入的 YouTube 视频显示在名为“类似节日”的轮播左侧。用于嵌入 YouTube 视频的 HTML 是：

YouTube 部分的 HTML 为：

<div class="span4 spacer youtube">
    <div class="title clearfix">
        <h2 class="pull-left">YouTube</h2>
    </div>
    <iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>

页面的布局（使用响应式 Bootstrap 网格）是这样的，即视频应与右侧的轮播具有相同的高度，但正如您所见，它以某种方式脱离了其父容器。我希望视频与右侧的轮播对齐，我该如何解决这个问题。

这是一个屏幕截图，以防对我所指的内容有任何疑问！

【问题讨论】：

我的猜测是您正在使用来自 Youtube 的嵌入脚本来执行此操作，并且该脚本正在破坏布局，因为它在 .row 的 css 渲染完成后嵌入了播放器对象。检查你的页面并没有给我真正的代码：你使用的是 youtube 的标准嵌入代码吗？
@adityamenon 你说的“检查你的页面并没有给我真正的代码”是什么意思。如果您查看页面的源代码，您将获得真正的代码。
啊，是的，这是一个知道如何使用汽车而忘记如何走路的案例。抱歉，我只使用了开发者工具。

标签： html css iframe youtube

【解决方案1】：

我注意到row-fluid 容器正在为您的 Youtube 视频动态添加 33% 的宽度。因此，无论您设置的任何宽度预期都将被该类重置。

试试这个：

<div class="row-fluid">


    <div class="span4 spacer twitter">
    </div>


    <!-- Youtube -->
    <div class="span4 spacer youtube">
        <div class="title clearfix">
            <h2 class="pull-left">YouTube</h2>
        </div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>        
    </div>

    <!-- Similar Carousel -->
    <div class="span4 spacer">

        <div id="similarCarousel" class="carousel slide last">
        </div>
    </div>

</div>

（向异形先生致敬）

它只设置 iframe 高度。整个排液容器有些膨胀，高度不规则。但是，您没有“跳出容器”的问题。

【讨论】：

【解决方案2】：

代替

<iframe id="fitvid811516"
    src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>

使用这个

<iframe width="640" height="360" 
    src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage" 
frameborder="0" allowfullscreen>
</iframe>

并手动调整宽度和高度。 iframe 不适合动态调整大小。

另外，如果你不想破坏布局，又不想改变里面的内容，你也可以到HTML的父容器中设置overflow: hidden

.fluid-width-video-wrapper {
    overflow:hidden;
}

请注意，这会修复您的布局，但会破坏 iframe；播放控件所在的底部将被隐藏。

【讨论】：