埋め込みレスポンスYoutubeビデオ列幅と高さに合わせて

Question

私はYoutubeビデオを埋め込むとき、それはコラムよりはるかに小さいので、高さと幅を別々に設定しようとしましたが、動作しないようです。私は、ブートストラップ、HTML5およびCSS3

this is an image to show what is happening and what I want to happen

HTMLを使用して...何かが欠けている必要があります。

<section id="one-head" class="one-head"> 
<div class="container"> 
<div class="row"> 



<div class="col-md-pull-1 col-sm-4 col-md-offset-2 col-sm-offset-2 center"> 

<div class="videocab"> 
<iframe class="embed-responsive-item" width="100%" height="auto"  
src="https://www.youtube.com/embed/VzqVWbTIuuu?rel=0&amp;showinfo=0" 
frameborder="0" allowfullscreen></iframe> 

</div> 
</div> 

<div class="col-md-6 col-sm-12"> 
<div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow 
duration="500ms"> 
<h1> 
text 
</h1> 

<h2> 
text 
text 
</h2> 

<p> 
Ttext ijasfijvpeoa niA SPdfup ajfaksnf 'asFJh'aspfj  
uASIPFJAIPFHAS"JLFNhasf"J ASIF"ASIPF a asjpfaIFJapifjaSFJaPFJaspjfAPSJF 
POAJFpOAJSFpoajsfpAOSJFpoSAJFPoJASFPJASPOASJFPOASJFpojfOPAJFoasjfASOPJFsoap 
fjOASJFoSAPJFAOJFAOPJFAOSPJFPOJFPAJFPOAJFspoajfOPASJF 
<br> 
<br> 

<span><a class="anchor-textcab" href="#techspecs">Cabinet Colors</a></span>   
<span><a class="anchor-textcab" href="#techspecs">Cabinet Size</a></span> 
<span><a class="anchor-textcab" href="#techspecs">Details</a></span> 
</p> 


<a class="btn-cab" href="contact.html">Request&nbsp;a&nbsp;Quote</a> 

</div> 
</div> 
</div> 
</div> 
</section> 

CSS。

#one-head { 
padding-top: 5%; 
padding-bottom: 4%; 
} 
#one-head .block { 
padding: 20px 10px 30px; 
} 
#one-head .block h2 { 
font-size: 25px; 
font-weight: 500; 
margin-bottom: 30px; 
text-transform: none; 
color: #00bfff; 
} 

#one-head .block h3 { 
font-size: 40px; 
font-weight: 400; 
margin-bottom: 30px; 
text-transform: none; 
} 

#one-head .block p { 
color: #727272; 
font-size: 16px; 
line-height: 28px; 
margin-bottom: 35px; 
} 
#one-head .block img { 
padding-top: 8%; 
width: auto 
} 

#one-head .block .matrix-bold { 
font-weight: 500; 
margin-top: -20px; 
}  

Answer 1

私はそれを理解したので、高さを100％から400pxに変更しなければなりませんでした。

<div class="videocab"> 
<iframe class="embed-responsive-item" 
     frameborder="0" 
     allowfullscreen="1" 
     title="YouTube video player" 
     width="100%" 
     height="400px" 
     src="https://www.youtube.com/embed/VzqVWbTIsuuu?color=white&amp;enablejsapi=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;wmode=transparent&amp;playlist=3iboEi4GvQA&amp"> 
</iframe> 

.videocab { 
padding-top: 14%; 
} 

Answer 2

あなた.blockのdivのスタイル、それでも.videocab 1に触れていないように見えます。

まず、両方のdivにプロパティfloatを設定して、画面の左側または右側に設定する必要があります。

通常、divsにはそれぞれ50％が必要ですが、100％を超えると非常に奇妙に見えるので、既にある余白と埋め込みを考慮する必要があります。あなただけの画面の上部に表示されるようにビデオを避けるために、あなたの.block 1で行うよう

最後に、.videocab divの中に希望margin-topとpadding-topを設定します。

私はあなたのコードに基づいて例を作成しました。これはあなたが私の意図を明確に理解しているはずです。

古いブラウザのサポートとこの基本的な使い方については、上記のプロパティを使用して問題を解決することができます。しかし、flexboxを使用してサイト内のすべての要素を簡単に素早くレイアウトすることをお勧めします。