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

Question

我在我的网站上有一个文本框，以使文本更易于阅读。我的网站上有一个iframe，该网站放在移动设备的盒子外面。因此，我遵循本教程来解决这个问题。我正在尝试使我的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 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 }

}