自适应视频播放器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;
}

示范:

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

共有 8 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. Pingback: 实用代码 China WordPress Unknow Os