当前位置:首页 > 技术 > 正文内容

iframe,object,embed标签嵌入视频后,宽高度自适应的css技巧

Lavfun2年前 (2022-09-14)技术4868

有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:

<iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe>

如果在发布时清除了原来的格式,那么这个嵌入的视频也随之变得很小。如下图。

FF0B1B42-3A60-41B5-A390-11C49E49E038.png

下面这个方法,经过测试是可行的。

把以下css文件,放到网站使用的样式表文件的最后。

.video 
{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed 
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

然后在发布文章时,切换至html标签,在视频标签,iframe,或object,或embed的上级html标签中(对比上面的css文件层级),加入class="video"即可。例如,上级标签是<p>:

<p class="video"><iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe></p>

刷新网站的样式文件及页面,发现变了!


扫描二维码推送至手机访问。

版权声明:本文由 声光视趣 - lavfun.com 发布,如需转载请注明出处。

本文链接:https://www.lavfun.com/technical-forum/72.html

分享给朋友:

相关文章

DIV_P_SPAN等html标签的用法和区别

<div> </div> 盒子模型 用来做结构的,一般用它来布局 。<p> </p> 中间不可以放div标签,可以但不限于放文字,这个用起来有段落,p标签,可设置宽高的文字区块。<spa...

常用html编辑代码及条目样式记录备用

常用html编辑代码及条目样式记录备用HTML条目排版样式红头条目html代码内容:视频教程内容从激光认识、激光灯的结构与原理、常见的概念等基础知识讲起,以及BEYOND软件操作界面、快速工具、编辑器、时间线、播放列表、实战搭建与连接、激光...

HTML图文内容快速另存/转换为Word文档的Docx格式的方法

HTML图文内容快速另存/转换为Word文档的Docx格式的方法

有时候,出于收集资料、收藏资料等目的,可能需要将网页上的图文内容保存下来,而且希望在有需要的时候可以对内容进行一定的编辑,那么保存为.docx的word文档会是最佳选择,那怎么才能把html网页里的图文内容快速保存为docx的word文档呢...

在自己网站嵌入B站视频代码,如何禁止自动播放和如何定位播放!

在自己网站嵌入B站视频代码,如何禁止自动播放和如何定位播放!

很多人在 B站 上传视频后,都会有转发到自己网站 或 个人博客的需求,B站也提供了一键复制网站嵌入代码,可以很方便的把B站的视频,引用转发到自己需要播放该视频的网站中去。B站视频播放页,有视频分享功能,可以很方便的 一键复制分享视频 代码,...

html符号/网页特殊字符大全-依据官网整理,值得收藏

符号对应的代码tab键&Tab;换行&NewLine;&&amp; &AMP;!&excl;"&quot; &QUOT;#&num;$&dollar;...