# Web加载视频布局异常
#### 问题现象
加载视频完成前下半部分会被遮挡，加载完成再展示全部。
#### 背景知识
* iframe标签：用于在网页中嵌入另一个网页或资源。其默认行为是根据内容自动调整大小，除非设置了固定宽高或通过CSS限制了尺寸。
* video标签：HTML5中用于嵌入视频内容的标签，支持自动播放、全屏、尺寸控制等属性。
* 视频加载机制：当video加载完成后，其本身尺寸可能会根据视频的分辨率进行调整，若没有限制，则可能影响iframe的布局。
* [ArkWeb](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-component-overview)（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。
#### 问题定位
在使用iframe加载video时，iframe没有设置宽高，video加载完成后超过iframe的宽高就会撑开，导致页面异常。
1. 通过[DevEco Testing](https://developer.huawei.com/consumer/cn/download/)的UIViewer查看页面布局，确认使用iframe嵌入的页面。
2. 对比两个iframe中的video组件的宽高。确认video组件宽高没有设置固定值。
#### 分析结论
视频在加载完成后改变了自身尺寸，而iframe未对其内容的大小变化进行有效限制。因此，iframe自动扩展以适应内容，导致外部页面布局异常。
#### 修改建议
1. 使用ArkWeb加载iframe页面：
```
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: $rawfile('iframe.html'), controller: this.controller })
.geolocationAccess(false)
.fileAccess(true)
}
}
}
```
2. 设置iframe内video的固定尺寸：
```
Video
```
3. 限制iframe的最大尺寸：
```
Iframe
```