Question

我正在尝试为视频设置样式，因为在移动版本上，视频不适合屏幕。我有以下HTML代码：

      <li>
        <a class="uk-accordion-title" href="#">How much is the fish?</a>
        <div class="uk-accordion-content">
       <p><div class="iframe-container">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/cbB3iGRHtqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div></p>
     </li>
    </ul>
  </div>
</div>

因此，为了为移动版本的视频设置样式，我做了以下操作：

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

但是，当我在CSS文档中进行这些更改时，它没有任何机会。我不太确定我在这里做错了什么。我没有选择正确的元素是事实吗？另外，我还有一张完整的代码图片，可以发布：Full code

Answer 1

我照原样保留了HTML和CSS，但更改了CSS中的宽度

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

<li>
        <a class="uk-accordion-title" href="#">How much is the fish?</a>
        <div class="uk-accordion-content">
       <p><div class="iframe-container">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/cbB3iGRHtqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div></p>
     </li>
    </ul>
  </div>
</div>

为移动版本设置嵌入式视频的样式

1 个答案: