0

在此页面上，嵌入的 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 网格）使得视频应该与右侧的轮播具有相同的高度，但正如您所见，它以某种方式脱离了其父容器。我希望视频与右侧的轮播对齐，我该如何解决这个问题。

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

在此处输入图像描述

4

2 回答 2

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

于 2012-12-16T14:48:43.373 回答
1

代替

<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；将隐藏播放控件所在的底部。

于 2012-12-16T15:02:44.583 回答