html - 如何在移动和 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

您可以使用 Bootstrap 或媒体查询来完成此任务，使用媒体查询时，您必须为您的设备提供适当的像素

bootstrap

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

media query

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

  }