html - 嵌入式YouTube视频布局问题

在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网格)使得视频的高度应与右侧的轮播相同，但是如您所见，它以某种方式突围了其父容器。我希望视频与旋转木马在其右侧对齐，如何解决此问题。

这是一个截图，以防万一我要指的是什么!

最佳答案

我注意到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高度。整个行流体容器有些膨胀，并且高度不规则。但是，您没有“跳出容器”的问题。

关于html - 嵌入式YouTube视频布局问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13902221/