嵌入YouTube视频布局问题

在this page嵌入的YouTube视频显示在标题为“类似节日”的轮播的左侧。用于嵌入的YouTube视频的HTML是：嵌入YouTube视频布局问题

的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>

页（使用响应引导电网）的设计是这样的视频应该有相同的身高作为它右侧的旋转木马，但正如你所看到的，它不知怎么的突破了它的父容器。我希望视频与其右侧的旋转木马一致，我该如何解决这个问题。

下面是截图，以便对我所指的内容有任何疑问！

enter image description here

来源

2012-12-16 Dónal

我的猜测是，您使用的是来自Youtube的嵌入脚本来完成它，并且该脚本正在破坏布局，因为它在'.row'的css渲染完成后嵌入播放器对象。检查您的网页并不能提供真实的代码：您是否在使用YouTube的标准嵌入代码？ –

@adityamenon你的意思是“检查你的页面并没有给我真正的代码”。如果您查看页面的源代码，您将获得真实的代码。 –

啊，是的，这是一个知道如何使用汽车并忘记如何行走的案例。对不起，我只使用开发者工具。 –

我注意到，row-fluid容器动态加入33％的宽度到您的Youtube视频。因此，无论您设定的宽度期望值是由该类别重置的。

试试这个：

<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-16 14:48:43

而不是

<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-16 15:02:44

嵌入YouTube视频布局问题

回答

相关问题