具有嵌入式视频的响应式2列布局

Question

我在主页上有一个两列部分，带有自适应视频。

目标是在左侧列上获取文字在绝对中心，并让视频占据<％> <专栏> righ t列，但有响应。

我已经实现了这一点......但视频高度缩小，最终右列小于左侧。

我仍然需要添加媒体查询来修复某些地方的文字，但我不知道如何处理视频。

.left {
    float: left;
    width: 50%;

}


.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.financingBlock{

    height: 100%;
    min-height:100%;
    position: relative;
}

.financingText{
    padding:90px 0 0 104px;   
}

.financingText p{
line-height: 30px; 
font-size: 14px;
padding-right:70px;
}
.clearer {
    clear: both;
}

<div class="financingBlock">
        <div class="left">
                  <div class="financingText">

                        <p>SLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum luctus ex, at bibendum dolor feugiat vel. Mauris sit amet ante interdum, varius nibh vitae, condimentum nunc.</p>

                      <p>usce posuere tempus tempus. Sed nec nibh justo. Vestibulum nec eleifend libero, tempus elementum quam. Nulla a facilisis sem, vitae imperdiet diam. Pellentesque faucibus porta facilisis. Vestibulum quis augue a nunc euismod hendrerit. </p>

                   </div>

                </div>
      <div class="right">
                    <div class="videoWrapper">
                        <!-- Copy & Pasted from YouTube -->
                        <iframe width="560" height="600" src="https://www.youtube.com/embed/nDY8b68oLA0?rel=0&hd=1" frameborder="0" allowfullscreen>                             </iframe>
                    </div>
                </div>

  <div class="clearer"></div>

</div>

Answer 1

似乎您已为每个屏幕尺寸提供了静态填充 像：

.financingText{padding:90px 0 0 104px;}

改为使用：

.financingText{padding:0;vertical-align:middle;text-align:center;margin:0auto;}