html - 嵌入适合列宽和高度的响应式 Youtube 视频

Question

当我嵌入 Youtube 视频时，它比该列小得多，我尝试以不同方式设置高度和宽度，但它似乎不起作用。我一定是遗漏了什么……使用 Bootstrap 、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

看起来你正在设计你的 .block div，但甚至没有触及 .videocab 。

首先，您需要为两个 div 设置属性 float 以将它们设置在屏幕的左侧或右侧。

通常您希望每个 div 具有 50% 的 width，但是您应该考虑您已经拥有的边距和填充，因为它超过 100% 看起来会很奇怪。

最后，在 .videocab div 中设置所需的 margin-top 和 padding-top，就像您对 所做的那样。阻止一个只是为了避免视频出现在屏幕顶部。

我创建了一个 jsfiddle基于您的代码的示例，这应该让您清楚地了解我的意思。

对于较旧的浏览器支持和这种基本用法，我提到的属性能够解决您的问题。不过，我也想推荐你使用 flexbox以简单美观的方式布置您网站中的每个元素。