嵌入式YouTube视频布局问题

Question

在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网格）使得视频应该与其右侧的轮播具有相同的高度，但正如您所看到的，它以某种方式突破其父容器。我希望视频与右侧的旋转木马对齐，我该如何解决这个问题。

如果对我所指的内容有任何疑问，请点击此处截图！

Answer 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高度。整个排液容器稍微膨胀，高度不规则。但是，你没有“跳出容器”的问题。

Answer 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;它的底部部分将隐藏游戏控制。