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

2020/06/2313:54:50 评论 135 views

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

iframe默认可以设置高度和宽度,但如果写死高度和宽度,则在手机、电脑和平板上有自适应问题,会出现视频宽度超过页面的状况。这种状况下,写入如下代码。然后用

.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>

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

刷新网站的样式文件及页面,自适应即可实现。

原梓番主讲Excel进阶与提升视频课(淘宝在线观看)
Wordpress建站问题咨询解决
PPT精品模板
Excel表格制作

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: