html - 我如何：将 HTML/CSS 中的 iframe 视点设置为一个屏幕而不是另一个屏幕的自动大小

Question

如何设置iframe视点以 100% 自动调整移动设备，但不大于width="600" height="400"在笔记本电脑或计算机显示器上查看时的大小并将其居中？

我正在使用但调整为 100% 的所有屏幕的 Html/CSS 示例：

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
} 

<div class="iframe-container">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" width="600" height="400"></iframe>
</div> 

Answer 1

您需要为此添加媒体查询。

/* Desktop */
.iframe-container iframe {
  width: 600px;
  height: 400px;
}

/* Mobile */
@media screen and (max-width: 768px) {
  .iframe-container iframe {
    width: 100%;
    height: auto;
  }
}

Answer 2

添加到上一个答案，使其在中间对齐：

.iframe-container {
    width:100%;
    text-align:center;
}