Question

我的网页上有一个播放YouTube视频的视频。在桌面上，这完全正常，但是，当我在移动设备上检查这一点时，即使在使用媒体查询后，iframe也不会调整大小以适应移动设备。如何从设备到设备查看时，如何正确缩小我的iframe？

到目前为止，我有这个

<div class="container-fluid text-justify bg-2" id = "video-container">
  <h2 class = "text-center">Sample Text</h2>
  <p>Some more sample text <br>
  Another line of Sample text </p>

  <div id = "video">
    <iframe  width="560" height="315" src="https://www.youtube.com/embed/sIP4Gymk1nE" frameborder="0" allowfullscreen></iframe> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/U4TUt2ukzyE" frameborder="0" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XS4S2O8UXqE" frameborder="0" allowfullscreen></iframe>

 </div>
</div>

除此之外，我还有CSS：

#video iframe{padding: 15px;}
@media all and (max-width: 768px){

 #video-container > #video > iframe{
    padding: 15px;
    width:100%;
    height:100%;

}}

最后，这是在移动设备上尝试时，视频从div中溢出的情况。

如何解决这个问题？感谢

Answer 1

你可以试试这个：

<强> HTML

 <div class="container-fluid text-justify bg-2" id = "video-container">
    <h2 class = "text-center">Sample Text</h2>
    <p>Some more sample text <br>
        Another line of Sample text </p>

    <div class="video">
        <iframe src="https://www.youtube.com/embed/sIP4Gymk1nE" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class = "video">
        <iframe src="https://www.youtube.com/embed/U4TUt2ukzyE" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class = "video">
        <iframe src="https://www.youtube.com/embed/XS4S2O8UXqE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

<强> CSS

        #video-container {
            max-width: 560px;
        }
        .video {
            position:relative;
            padding-bottom:56.25%;
            padding-top:30px;
            height:0;
            overflow:hidden;
        }
        .video iframe {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }

它对我有用。祝你好运！

我的iframe视频在桌面上运行正常，但不会为移动设备调整大小。我怎样才能解决这个问题？

1 个答案: