使用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

站长微信
扫码添加(注明来意)
weinxin
Yuanzifan99
原梓番博客公众号
博客内容精选
weinxin
原梓番博客
 

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证