レスポンシブルvimeoビデオを埋め込みます

Question

https://codepen.io/malditojavi/pen/BZGVoqを使用しています - 私はブートストラップからresponsiveヘルパークラスによって作成されたパディングボトムの余分なスペースを取り除こうとしています。 "：50％高さ;"

<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のラインでスタイル=をいくつかの余分なスタイリングのコードを追加しました私はVimeoによって作成された余分な黒いスペースを取り除くことができます。

Answer 1

この

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

0を試してみてください応答

embed responsively

動画を埋め込むには、このリンクをお試しください これは役に立ちます。