在同一行插入两个响应式 youtube 视频答案

【问题标题】：Insert two responsive youtube video on the same row在同一行插入两个响应式 youtube 视频
【发布时间】：2017-12-26 07:12:17
【问题描述】：

大家好，感谢您抽出宝贵时间阅读本文。我的问题如下。我试图将 2 个 youtube 视频放在同一行，这给我带来了一些问题。到目前为止，这是我所拥有的： html:

<div class="vimeo-wrapper">
<div class="vimeo-video-1 vimeo-standard">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hygokYbjbeY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vimeo-video-2 vimeo-standard">
<iframe width="560" height="315" src="https://www.youtube.com/embed/O1XotwR0_H0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h2 id="cotizacion" style="color: white; border-radius: 8px; background-color: #008cba; text-align: center; display: center; font-size: 20px; padding: 14px 40px;"><strong>FILL OUT THIS FORM AND GET YOUR QUOTE WITHIN AN HOUR (DURING BUSINESS DAYS)</strong></h2>

css:

.postid-2916 .vimeo-wrapper {
    max-width: 980px;
    position: relative;
    margin: 0 auto;
    border: 1px solid green;
    padding-bottom:10px;
}

.postid-2916 .vimeo-standard {
    float: left;
    height: 300px;
    width: 47%;
    border: 1px solid #000;
    margin: 10px;
}

.postid-2916 iframe {
    width: 100%;
    height: 100%;
}


.postid-2916 @media (max-width:767px) {

.postid-2916 .vimeo-standard {
        float: none;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
}

.postid-2916 .clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.postid-2916 .clearfix:after {
    clear: both;
}

不知何故这就是我得到的screenshot 似乎我的包装器不包括我的 2 个视频。知道是什么原因造成的吗？

【问题讨论】：

标签： css youtube embed responsive

【解决方案1】：

你可以试试这个代码。 html

<div class="vimeo-wrapper">
<div class="vimeo-video-1">
<iframe width="400" height="315" src="https://www.youtube.com/embed/hygokYbjbeY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vimeo-video-2">
<iframe width="400" height="315" src="https://www.youtube.com/embed/O1XotwR0_H0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h2 id="cotizacion" style="color: white; border-radius: 8px; background-color: #008cba; text-align: center; display: center; font-size: 20px; padding: 14px 40px;"><strong>FILL OUT THIS FORM AND GET YOUR QUOTE WITHIN AN HOUR (DURING BUSINESS DAYS)</strong></h2>

CSS

.vimeo-wrapper{

   width:100%


}

.vimeo-video-1{
  float:left;
  width:50%;
}


.vimeo-video-2 {
  float:right;
  width:50%;
}

【讨论】：

【解决方案2】：

请遵循此代码

.vimeo-video-1,.vimeo-video-2
 {
    margin-right: 2%;border: 2px solid black;float:left;width:47%;
 }


.vimeo-wrapper
 {
   background-color: #008cba;
    width: 75%;
    border-radius: 10px;
    padding: 1% 6%;
 }
 .postid-2916 .vimeo-wrapper {
    max-width: 980px;
    position: relative;
    margin: 0 auto;
    border: 1px solid green;
    padding-bottom:10px;
}

.postid-2916 .vimeo-standard {
    float: left;
    height: 300px;
    width: 47%;
    border: 1px solid #000;
    margin: 10px;
}

.postid-2916 iframe {
    width: 100%;
    height: 100%;
}


.postid-2916 @media (max-width:767px) {

.postid-2916 .vimeo-standard {
        float: none;
        width: 80%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
}

.postid-2916 .clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.postid-2916 .clearfix:after {
    clear: both;
}
.strong-custom-style{color: white;border-radius: 8px;text-align: center;font-size: 20px; padding: 14px 40px;display: block;clear: both;}

<div class="vimeo-wrapper">
<div class="vimeo-video-1 vimeo-standard">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hygokYbjbeY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="vimeo-video-2 vimeo-standard">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/O1XotwR0_H0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<strong class="strong-custom-style">FILL OUT THIS FORM AND GET YOUR QUOTE WITHIN AN HOUR (DURING BUSINESS DAYS)</strong>

这个东西你需要在媒体查询中添加 width="560" height="315" 。

【讨论】：

【解决方案3】：

您可以在代码中替换此 CSS

.postid-2916 > .vimeo-wrapper {

    width:100%;
    position: relative;
    margin: 0 auto;
    border: 1px solid green;
    padding-bottom:10px;

}

.vimeo-wrapper  >.vimeo-video-1  {
    float: left;
    height: 300px;
    width: 50%;

}

.vimeo-wrapper  >.vimeo-video-2  {
    float: right;
    height: 300px;
    width: 50%;


}

.postid-2916 iframe {
    width: 100%;
    height: 100%;
}


.postid-2916 @media (max-width:767px) {

.postid-2916 .vimeo-standard {
        float: none;
        width: 50%;
        margin: 0 auto;
        padding-bottom: 10px;
    }
}

.postid-2916 .clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.postid-2916 .clearfix:after {
    clear: both;
}

【讨论】：