将 Youtube 视频正确嵌入到 bootstrap 3.0 页面

Posted 2023-02-24

【中文标题】将 Youtube 视频正确嵌入到 bootstrap 3.0 页面

【英文标题】：Properly embedding Youtube video into bootstrap 3.0 page

【发布时间】：2014-01-20 05:18:40

【问题描述】：

我需要在我的响应式网站中嵌入一个 YouTube 视频，但它无法正确缩放，尤其是在移动设备上。 它在台式机和平板电脑上看起来不错，但是一旦您低于 600 的视口宽度，视频就会破坏其容器。要在移动设备上观看整个视频，您需要将其放大到其余内容仅垂直填充大约 1/2 屏幕的程度。不太好。

我希望桌面和平板电脑上的文本内容为 1/3 宽，视频为 2/3 宽，并在移动设备上堆叠，视频和内容均为视口宽度的 100%。我试过在 iframe 上使用 但是当你调整大小时高度不能正确缩放，视频要么被拉伸要么被压扁。

我也只需要使用 CSS，因为我只是将我的样式表放在 stock bootstrap 3.0 上。

这是我的代码：

 <div class="container">            
            <div class="row">
                <div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
                <div class="col-sm-8">
                   <iframe   src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
                </div>
 </div>

【问题讨论】：

你试过了吗？ bootsnipp.com/snippets/featured/responsive-youtube-player

【参考方案1】：

它有一个简单易行的解决方案。您可以轻松制作视频以适应任何设备和屏幕尺寸。 这是 html 和 CSS 代码：

.yt-container 
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;


.yt-container iframe, .yt-container object, .yt-container embed 
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

<div class="yt-container">
   <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>

来源：https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/

【参考方案2】：

我也使用 bootstrap 3.x，以下代码用于响应式 youtube 视频嵌入对我来说就像魅力一样：

.videoWrapperOuter 
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;

.videoWrapperInner 
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;

.videoWrapperInner iframe 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

<div class="videoWrapperOuter">
  <div class="videoWrapperInner">
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

我在另一个线程 (Shrink a YouTube video to responsive width) 上给出了类似的答案，但我想我的答案在这里也可以提供帮助。

【参考方案3】：

我知道已经很晚了，我对旧的自定义主题也有同样的问题，刚刚添加到 boostrap.css：

.embed-responsive 
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;

.embed-responsive-16by9 
  padding-bottom: 56.25%;

.embed-responsive-4by3 
  padding-bottom: 75%;

对于视频：

<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>

【参考方案4】：

有一个Bootstrap3原生解决方案： http://getbootstrap.com/components/#responsive-embed

自 Bootstrap 3.2.0 起！

如果您使用的是 Bootstrap

【讨论】：

不知何故它不适用于我的引导页面上的 youtube 视频。我不得不使用这个解决方案：***.com/questions/15844500/…

【参考方案5】：

这还取决于您如何使用引导程序设计您的网站。 在我的示例中，我将 col-md-12 用于我的视频 div，并为 iframe 添加类 col-sm-12，因此当调整到较小的屏幕时，视频不会被压缩。 我还向 iframe 添加了高度：

<div class="col-md-12">
<iframe class="col-sm-12"  frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>

【参考方案6】：

这对我来说很好......

   .delimitador
        width:100%;
        margin:auto;
    
    .contenedor
        height:0px;
        width:100%;
        /*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
        padding-top:56.25%; /* Relación: 16/9 = 56.25% */
        position:relative;
    

    iframe
            position:absolute;
            height:100%;
            width:100%;
            top:0px;
            left:0px;
    

然后

<div class="delimitador">
<div class="contenedor">
// youtube code 
</div>
</div>

【参考方案7】：

考虑将视频包装在可以通过 bootsrap 灵活设置的东西中。

引导程序不是一个神奇的工具，它只是一个布局引擎。你的例子中几乎有它。

只需使用引导程序提供的网格并删除 iframe 上的严格尺寸。使用网格的引导类指南..

例如：

<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">

根据您的分辨率，您将看到 iframe 的类将如何变化。

也是一个菲德尔：http://jsfiddle.net/RsSAT/

【讨论】：

问题是关于高度（而不是宽度）的可变性。

我的回答遵循同样的原则。几乎没有理由拒绝投票。我们不必用勺子喂所有人。

我试图纠正我的不赞成点击但我不能 - 它让我在反对或赞成之间进行选择，但现在有办法清除它。对不起。不过，这有助于提高身高：gist.github.com/jgarber/2302238

没问题。你应该在你的发现中添加一个答案。