如何讓嵌入式視頻在縮小的瀏覽器中響應

因此，我在全寬瀏覽器中使用嵌入式視頻的方式，但是當它縮小到小尺寸瀏覽器和下面時，我無法確定找出響應的方式，所以它保持在瀏覽器的中心位置。如何讓嵌入式視頻在縮小的瀏覽器中響應

我正在使用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>

來源

2017-11-18 Fins Up

對於視頻響應性，使用百分比（下面的例子）。亂調百分比，直到它按照你喜歡的方式工作。您可能還需要一個容器才能放入視頻。

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

來源

2017-11-18 01:08:39 GoofBall101

我曾嘗試過，我甚至再次嘗試過，但這不適用於嵌入式視頻。 –

你從哪裏得到視頻？ – GoofBall101

它從YouTube嵌入 –

如何讓嵌入式視頻在縮小的瀏覽器中響應

回答

相關問題