嵌入响应式 vimeo 视频

Question

使用https://codepen.io/malditojavi/pen/BZGVoq - 我正在尝试摆脱由 Bootstrap 中的 responsive 辅助类创建的 padding-bottom 额外空间。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-6 embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" style="height: 50%;" src="https://player.vimeo.com/video/195372563" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="col-md-6">
      <h2>Title</h2>
      <p>And some text</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" style="height: 50%;" src="https://player.vimeo.com/video/195372563" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="col-md-6">
      <h2>Title</h2>
      <p>And some text</p>
    </div>
  </div>
</div>

请注意，我在 iframe 行 style="height: 50%;" 中添加了一些额外的样式代码这样我就可以摆脱 Vimeo 创建的额外黑色空间。

Answer 1

尝试此链接以响应式嵌入视频

embed responsively

试试这个

HTML

<div class="container">
  <div class="row videorow">
    <div class="col-md-6">
      <div class='embed-container'><iframe src='http://player.vimeo.com/video/195372563' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </div>
    <div class="col-md-6">
      <h2>Title</h2>
      <p>And some text</p>
    </div>
  </div>

   <div class="row videorow">
    <div class="col-md-6">
      <div class='embed-container'><iframe src='http://player.vimeo.com/video/195372563' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </div>
    <div class="col-md-6">
      <h2>Title</h2>
      <p>And some text</p>
    </div>
  </div>
</div>

CSS

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videorow{
  margin:10px auto;
}

Link for reference 希望这会有所帮助...