Question

使用https://codepen.io/malditojavi/pen/BZGVoq - 我正试图摆脱Bootstrap中responsive助手类创建的填充底部额外空间。

<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 希望这会有所帮助...

嵌入响应式vimeo视频

1 个答案: