-
我想很多小伙伴在写博客的时候都能遇到一个令人头疼的问题,某一篇文章想用
iframe
引入一个外链视频,但是大小总是有问题,宽度可以固定到 100% ,但是高度比如用实际高度来表示,比如100px
,200px
,诸如此类。但是问题来了,在不同的页面宽度下,视频的高度是一致的,就会导致一个很麻烦的问题,
看下面两个图,
pc端
移动端
很明显,在pc端正常显示的视频,放到移动端高度就错位了,很不美观。
解决这个问题,可以同媒体查询,但是显然费时费力,还不那么完美。
其实很简单,只需要不到10行代码即可完美实现。
- 引入 jq ,(一般网站默认都有这个文件)
- 加上一段 js 代码,最好放在网站底部,
</body>
前即可。
$('iframe').wrap('<p class="iframe"></p>')
- 在css文件的底部加上:
.iframe{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
网站引入iframe视频,如何实现高度自适应?
1128人参与 |分类: 程序学习|时间:2023-01-06 11:14:34
相关文章
- 2022-12-11 帝国cms调用标题分类灵动标签调用方法
- 2022-09-30 input点击链接另一个页面,各种操作
- 2022-09-22 帝国cms如何在内容页添加代码高亮?
- 2022-09-22 帝国cms灵动标签调用标题分类、统计标题分类文章数的方法
- 2022-09-22 帝国CMS灵动标签中用if判断第X条附加特殊样式
- 2022-02-09 CentOS挂载详解
- 2021-09-25 帝国cms后台 不同栏目发布字段不同
- 2021-06-25 Centos、linux 安装 Cmake 3.6.2
- 2021-06-21 PHP header常用URL地址跳转的几种方法
- 2021-06-17 网站logo不清晰,图片模糊,如何解决?
评论专区辉哥视界微博