Question

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

HTML code：

<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 }
}

for Mobile

@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 }

}

如何在移动设备上提供不同宽度和高度的iframe视频？个人电脑浏览器？

2 个答案: