Hermit Cottage

自适应视频播放器 CSS 代码

因为家人身体不适,因此只能在家宅着折腾下代码。

在从良未遂博文《实用代码》中提到:

插入自适应媒体已经是刚需了,之前也介绍过一种姿势,貌似这个更简单一些。当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的,而且你在用手机浏览的时候视频播放器还变形了,以下代码自动让播放器按 16:9 的比例显示并自适应各个设备。另外:还可以插入腾讯自适应视频。

CSS 代码:

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

HTML 代码:

<div class="media-wrap">
<iframe height=498 width=510 src="https://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>

感谢从良未遂,解决了一直以来困扰本博的视频插入不能自适应手机界面的难题。不过按照上面的代码更改以前插入的一些 video 时发现,例如土豆网的代码是:

<embed src="https://www.tudou.com/l/VCcj6Exs374/&rpid=31700618&resourceId=31700618_05_05_99&iid=162923932&bid=05/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="600" height="400"></embed>

或者

<iframe src="https://www.tudou.com/programs/view/html5embed.action?type=1&code=iOGAkRoHuyM&lcode=VCcj6Exs374&resourceId=31700618_06_05_99" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0" style="width:480px;height:400px;"></iframe>

embed 代码在苹果 iOS 上无法正常显示,只能采用 iframe。而采用以上 CSS 代码后,在电脑上就被直接拉伸为 100% 了;另外如果两段 video 代码连续放置,会首尾连接在一起。解决方案是更改 width 为 max-width,以及增加 margin-bottom。如下:

.media-wrap {
 position: relative;
//改为 max-width,并添加!important
 max-width: 100% !important;
 height: 0;
 padding-bottom: 45%;
//增加 margin-bottom
 margin-bottom:20px;
}
//增加判断是否为 @media
@media (max-width:736px){
 .media-wrap {
 padding-bottom: 56.25%;
 }
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
 position: absolute;
 top: 0;
 left: 0;
//改为 max-width,并添加!important
 max-width: 100% !important;
 height: 100% !important;
}

示范:

在苹果手机上可以看见已经自适应了。

9 条评论

发表评论 →

难道每次插入视频都要在编辑器里加个

需要用到 quicktag 吗?应该怎么加呢?求教了。

Maxthon 4 Maxthon 4 Windows 8.1 Windows 8.1

居中要在外加个 div 然后加个 style:margin: 0 auto 吧,我没试过,你试试看

Wordpress App 8 Wordpress App 8 iPhone iOS 10.3.3 iPhone iOS 10.3.3

发表评论