当前位置：首页 > article >正文

iframe里放的视频，如何采用纯css适配

article 2024/10/29 2:20:37

步骤1：设置包含`iframe`的父元素

首先，确保iframe的父容器具有一个适当的宽高比。通过为父容器设置一个相对定位和一定的宽度和高度，你可以控制它的尺寸。

<div class="video-container">
    <iframe src="https://www.example.com" frameborder="0" allowfullscreen></iframe>
</div>

步骤2：应用CSS样式

接下来，使用CSS来确保iframe在父容器中保持宽高比并响应不同的屏幕尺寸。

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

解释：

.video-container：
- position: relative; 使得内部元素（即iframe）可以根据父容器定位。
- padding-bottom: 56.25%; 这是16:9视频比例的常用宽高比（可以根据实际视频比例调整，例如4:3为75%）。
- height: 0; 与padding-bottom配合使用，通过比例控制高度。
.video-container iframe：
- position: absolute; 确保iframe相对于父容器的顶角定位。
- width: 100%; 和 height: 100%; 确保iframe填充整个父容器，从而适应不同的屏幕大小。