使用iframe实现手机、电脑屏幕自适应宽度

使用iframe实现手机、电脑自适应：

iframe默认可以设置高度和宽度，但如果写死高度和宽度，则在手机、电脑和平板上有自适应问题，会出现视频宽度超过页面的状况。这种状况下,写入如下代码。然后用文章源自原紫番博客-https://www.yuanzifan.com/54864.html

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

然后在发布文章时，切换至html标签，在视频标签，iframe,或object,或embed的上级html标签中（对比上面的css文件层级），加入class=”video”即可。例如，上级标签是<p>文章源自原紫番博客-https://www.yuanzifan.com/54864.html

<p class="video"><iframe src="/video.mp4" frameborder="”0”" allowfullscreen="allowfullscreen"></iframe></p>

刷新网站的样式文件及页面，自适应即可实现。文章源自原紫番博客-https://www.yuanzifan.com/54864.html

文章源自原紫番博客-https://www.yuanzifan.com/54864.html 文章源自原紫番博客-https://www.yuanzifan.com/54864.html