文章内挂载视频

文章内挂载视频

huoyu

2022 年 12 月 04 日

519 次浏览

1 条评论

880字数

Blog - typecho

> 自适应视频尺寸，不会像以前嵌入视频时尺寸大小出现错误

使用方法：
将以下代码添加至 Handsome主题外观>设置外观开发者设置>自定义CSS

```css
/*视频挂载*/
.iframe_video {
position: relative;
width: 100%;
}

@media only screen and (max-width: 767px) {
.iframe_video {
height: 15em;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.iframe_video {
height: 20em;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.iframe_video {
height: 30em;
}
}

@media only screen and (min-width: 1200px) {
.iframe_video {
height: 40em;
}
}

.iframe_cross {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%
}

.iframe_cross iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0
}
```

示例

打开你想挂载在网站的b站视频
复制视频源代码（打开b站视频链接>点击转发图标>复制嵌入代码|需打开电脑版网站）
**在复制的嵌入链接的iframe与src之间添加class="iframe_video"**
完成，刷新网站感受效果吧

```java
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=647278459&bvid=BV1Ne4y1x7KZ&cid=884139256&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
```

最后修改：2022 年 12 月 05 日

如果觉得我的文章对你有用，请随意赞赏

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

速注册OpenAi（ChatGPT），国内也可以

Frida 代码自动补全

ubuntu 实现内网穿透

最新Fiddler Web Debugger v5.0 20202.18177中文版

windows一键启动雷电模拟器的frida-server

thinclient_drives

mac 使用的代理，终端不可直接使用，配置一下

frida 中断后重启服务异常 Error: invalid address

Supervisor（守护进程）的使用

易语言导出模拟器里面的软件上传指定ftp服务器

文章内挂载视频

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

文章内挂载视频

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款