如何在移动和 PC 浏览器上为 iframe 视频提供不同的宽度和高度？

Question

我的网站上有一个文本框，使文本更易于阅读。我的网站上有一个 iframe，放在移动设备上的盒子外面。所以我按照this 教程来解决这个问题。我试图让我的 iframe 视频在 pc 浏览器上更小，并在我的移动设备代码中缩小当前大小。现在pc上太大了有没有办法做到这一点？

HTML 代码：

<div class="video-container"><iframe src="https://www.youtube.com/embed/c0i88t0Kacs"></iframe>
</div>

CSS 代码：

.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden; }

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%; }

Answer 1

您可以为此任务使用引导程序或媒体查询， 在使用媒体查询时，您必须为您的设备提供适当的像素

引导

<div class="container">
 <div class="row">
   <div class="col-sm-12">
   </div>
  </div>
</div>

媒体查询

   @media screen and (max-width: 699px) and (min-width: 520px) {

  }

Answer 2

只需在您的 Css 中添加媒体查询

平板电脑

@media only screen and (max-width: 760px) {
.video-container {//set you width and height}

.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }
}

移动版

@media only screen and (max-width: 480px) {
.video-container {//set you width and height}
.video-container iframe, .video-container object, .video-container embed 
{//set you width and height }

}