2017-11-18 158 views
0

因此,我在全宽浏览器中使用嵌入式视频的方式,但是当它缩小到小尺寸浏览器和下面时,我无法确定找出响应的方式,所以它保持在浏览器的中心位置。如何让嵌入式视频在缩小的浏览器中响应

我正在使用Bootstrap的网格系统旁边的文本进行响应。我希望当浏览器触及中等大小以下时,将视频叠加在文本下方,并且当它处于中等大小的浏览器中时,我已成功地将视频集中在媒体查询中,但无法将其集中在小和超小的浏览器大小。这有意义吗?

.section1Text { 
 
    padding-top: 35px; 
 
} 
 

 
.section1Text h2 { 
 
    font-weight: 100; 
 
    font-size: 2.9em; 
 
    letter-spacing: 1px; 
 
} 
 

 
.section1Btn { 
 
    background-color: #2e3233; 
 
    border-style: solid; 
 
    border-width: 0px 0px 3px 0px; 
 
    border-color: #121313; 
 
    border-radius: 50px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    margin-top: 30px; 
 
    font-size: 1.45em; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
.video-responsive { 
 
    padding-top: 45px; 
 
    padding-bottom: 45px; 
 
    float: right; 
 
} 
 

 
.video-responsive iframe { 
 
    width: 560px; 
 
    height: 315px; 
 
} 
 

 

 
/*section1 media queries*/ 
 

 
@media (max-width: 992px) { 
 
    .video-responsive { 
 
    padding-top: 45px; 
 
    padding-bottom: 45px; 
 
    margin-right: 35px; 
 
    } 
 
    .video-responsive iframe { 
 
    width: 672px; 
 
    height: 378px; 
 
    } 
 
}
<section class="section1"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="section1Text col-md-4"> 
 
     <h2 class="text-center">What We Have to Offer</h2> 
 
     <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p> 
 
     <div class="col-xs-8 col-xs-offset-2"> 
 
      <a class="btn section1Btn btn-block" href="#">Learn More</a> 
 
     </div> 
 
     </div> 
 
     <div class="video-responsive"> 
 
     <iframe width="560px" height="315px" src="https://www.youtube.com/embed/bsY2GdBEvSA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

回答

1

对于视频响应性,使用百分比(下面的例子)。乱调百分比,直到它按照你喜欢的方式工作。您可能还需要一个容器才能放入视频。

.video-responsive iframe { 
     width: 100%; 
     height: 50%; 
    } 
+0

我曾尝试过,我甚至再次尝试过,但这不适用于嵌入式视频。 –

+0

你从哪里得到视频? – GoofBall101

+0

它从YouTube嵌入 –

相关问题