html - 我的iframe视频在台式机上可以正常运行，但无法在移动设备上调整大小。我怎样才能解决这个问题？

我的网页上有一个播放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上溢出时，尝试使用移动设备上的当前外观。


如何解决呢？谢谢

最佳答案

您可以尝试以下方法:

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

它为我工作。祝好运!

关于html - 我的iframe视频在台式机上可以正常运行，但无法在移动设备上调整大小。我怎样才能解决这个问题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38139938/