css - 如何使Iframe响应视频？

This question already has an answer here:

How did youtube create a fluid video player?
                                
                                    （1个答案）
                                
                        
                                6个月前关闭。
            
                    
实际上，我正在尝试制作自适应视频iframe，但我不能这样做。我已经尝试了很多次，没有背景框架就可以正常工作。

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='embed-container'>
  <iframe src='https://www.youtube.com/embed/vkt0sUM9C54' frameborder='0' allowfullscreen></iframe>
</div>

最佳答案

尝试使用此代码，并根据需要调整框架的宽度

@media only screen and (max-width:800px)
   /* For tablets: */
   .youriframeclass {
       width: 80%;
       padding: 0;
   }

   .youriframeclass {
       width: 100%;
   }
}

@media only screen and (max-width:500px) {
   /*For mobile phones:*/
   .youriframeclass {
       width: 100%;
    }
}

关于css - 如何使Iframe响应视频？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56931762/