Question

<iframe width="1280" height="720" scr="https://https://www.youtube.com/embed/_lE1GYParQA" frameborder="0" allowfullscreen>

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#showcase {
  margin-top: 5px;
  min-height: 450px;
  text-align: center;
  background: url('../Pictures/Showcase.png') no-repeat 0 -280px;
  color: #000;
  border: 2px;
}

#Video {
  margin: 0 auto;
  position: relative;
  height: 0;
  max-width: 1280px;
  max-height: 720px;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 56.25%;
  /* 16x9 aspect ratio */
  border: 2px blue solid;
}

#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/7xt8mccu/ 我有一个相对的iframe，由于youtube视频的图像没有调整大小16x9，有没有办法在屏幕变小时调整img的大小？先谢谢你了

Answer 1

您的代码有效。你刚才犯了一个错误。

在CSS中，替换

<ul id="lister">
    <li>Sunday</li>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
</ul>

与

#video iframe {

（资本V），它的工作原理。见https://jsfiddle.net/ns1mrfy5/

如何将相对位置应用于iFrame

1 个答案: