html - 如何让 YouTube 视频在 DIV 中为移动设备调整大小

Question

我在 DIV 中有一个 YouTube 视频，它似乎无法调整大小以适应移动屏幕的浏览器窗口。

目标是在桌面计算机上有 3 个部分:YouTube 视频(第 1 部分)SPACING(第 2 部分)文本(第 3 部分)(从左到右成一行)

在移动设备上，目标是:YouTube 视频，适合屏幕宽度(第 1 部分)SPACING(第 2 部分)(我希望这不是这里......但它是必需的，所以在台式计算机上视频和文本之间有空间)文本(第 3 节)(页面从上到下)

这是相关代码。请注意:我不以编码为生，这就是为什么我真的需要一些帮助。谢谢!

<style type="text/css"><!--
.section1 {
    display: inline-block;
    vertical-align: top;
    width: 450px;
background-color:white;
}
.section2 { 
    display: inline-block;
    vertical-align: top;
width: 10px;
background-color:white;
}
.section3 { 
    display: inline-block;
    vertical-align: top;
    border: 10px double #191919;
    padding: .600em;
    width: 450px;
background-color: #e5e5e5;
}
--></style>

<center>
<div class="section1"><iframe width="400" height="225" src="https://www.youtube.com/embed/auukuYuizq4" frameborder="0" allowfullscreen=""></iframe>

<div class="section2"> </div>
<div class="section3">Text here</div>
</center>

Answer 1

您是否考虑过使用 grid或 flex ？

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.section1 {
  background-color: white;
}

.section2 {
  vertical-align: top;
  width: 100px;
  background-color: white;
}

.section3 {
  border: 10px double #191919;
  padding: .600em;
  width: 450px;
  background-color: #e5e5e5;
}

<div class="container">
  <div class="section1">
    <iframe width="400" height="225" src="https://www.youtube.com/embed/auukuYuizq4" frameborder="0" allowfullscreen=""></iframe>
  </div>
  <div class="section2">
  </div>
  <div class="section3">
    Text here
  </div>
</div>