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，就像使用 .block 一样，以避免视频显示在屏幕顶部。

我根据您的代码创建了一个jsfiddle示例，这可以让您清楚地了解我的意思。

对于较旧的浏览器支持和此基本用法，我提到的属性可以解决您的问题。不过，我还建议您使用flexbox以简单明了的方式布置网站中的每个元素。

Answer 2

我想通了，我不得不将高度从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%;  
}

嵌入响应Youtube视频，适合列宽和高度

2 个答案: