CODEWITHSUNDEEP
csstwitter-bootstrapvimeo-player
malditojavi
malditojavi

Reputation: 1114

Embed responsive vimeo video

Working with https://codepen.io/malditojavi/pen/BZGVoq - I'm trying to get rid of the padding-bottom extra space created by the responsive helper class from Bootstrap.

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

Notice I added some extra styling code in the iframe lines style="height: 50%;" so I can get rid of the extra black space created by Vimeo.

Upvotes: 1

Views: 5294

Answers (1)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try this link to embed videos responsively

embed responsively

Try this

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 Hope this helps...

Upvotes: 2

Related Questions