首页 文章

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

提问于
浏览 次
57

我需要将YouTube视频嵌入到我的响应式网站中，但它无法正确扩展，尤其是在移动设备上 . 它在桌面和平板电脑上看起来很好，但是一旦你的视口宽度低于600，视频就会破坏它的容器 . 要在移动设备上查看整个视频，您需要捏一点，其余内容只能垂直填充大约1/2的屏幕 . 不太好 .

我希望文本内容为1/3宽，视频在桌面和平板电脑上为2/3宽，并在移动设备上堆叠，视频和内容均为视口宽度的100％ . 我已经尝试在iframe上使用width =“100％”，但是当您调整大小并且视频被拉伸或压缩时，高度无法正确缩放 .

我还需要使用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 width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
                </div>
 </div>
css twitter-bootstrap youtube embed

7 回答

  • 4

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

    自Bootstrap 3.2.0起！

    如果您正在使用Bootstrap <v3.2.0，请查看v3.2.0的“responsive-embed.less”文件 - 可能您可以在您的情况下使用/复制此代码（它适用于v3.1.1） .

    回复于
  • 5

    我知道它已经很晚了，我对旧的自定义主题有同样的问题，只是添加到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>
    回复于
  • 72

    想一想将视频包装在可以通过bootsrap灵活变通的内容中 .

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

    只需使用bootstrap提供的网格，并删除iframe上的严格大小 . 使用网格的bootstrap类指南..

    例如：

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

    根据您的分辨率，您将看到iframe的类将如何更改 .

    Fiddel也是：http://jsfiddle.net/RsSAT/

    回复于
  • 3

    它还取决于您如何使用引导程序为站点设置样式 . 在我的示例中，我使用col-md-12作为我的视频div，并为iframe添加类col-sm-12，因此当调整大小到较小的屏幕时，视频将不会被挤压 . 我还为iframe添加了高度：

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

    我也使用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）上给出了类似的答案，但我想我的答案也可以在这里提供帮助 .

    回复于
  • 24

    它有一个简单易用的解决方案 . 您可以轻松地使视频适合任何设备和屏幕尺寸 . 这是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/

    回复于
  • 4

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

    .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>
    回复于

相关问题