Question

大家好，感谢您抽出宝贵时间阅读本文。我的问题是如下。我试图将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个视频。知道是什么导致了这个吗？

Answer 1

请遵循此代码

＆＃13;

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

＆＃13;

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

＆＃13;

你需要在媒体查询中添加这个东西=＆＃34; 560＆＃34;高度=＆＃34; 315＆＃34;

Answer 2

您可以尝试使用此代码。 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%;
}

Answer 3

您可以在代码中替换此CSS

public function rules() {
    $rules = [
          'state' => 'required',
         ];
    foreach($this->request->get('state') as $key => $val) {
        $rules['state.'.$key] = 'required';
    }
    return $rules;
}

在同一行插入两个响应式YouTube视频

3 个答案: