如何设置h5播放器宽度适配手机宽度,高度自适应。

温馨提示:本文最后更新于2020-04-26 00:41:06,距当前已超过60天,某些文章具有时效性,若有错误或已失效,请在下方留言
热门位置,广告招租!

如何设置h5播放器宽度适配手机宽度,高度自适应。
如何设置h5播放器宽度适配手机宽度,高度自适应。

代码如下,本站现在也在用具体效果请看底部文章。

<style>
section {
    width: 100%;
    height: 0;
    padding-top: 75% /* 4:3 */
    position: relative;
}
section video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
<section>
    <video />
</section>

本站使用代码:

<div style="width: 100%; height: 0; padding-top: 75%; position: relative;"><iframe id="Player" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" src="https://player.youku.com/embed/XNDU5MzI1MTUxMg==" width="100%" height="100%" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>

演示效果:

女留学生归国非矿泉水不喝,大闹隔离点向民警索要人权


这是个悲伤的故事


夫妻要床头吵架床尾和嘛!

我们只提供下载服务,不保证每款资源的完整性、可用性、安全性,自行安装和试用。

给TA打赏
共{{data.count}}人
人已打赏
教程大全

禁止WordPress自动保存和修订版本方法

2020-4-24 13:48:06

教程大全

WordPress美化之文章内页新增彩色渐变框

2020-5-27 14:44:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索