自适应视频播放器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="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>

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

<embed src="http://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="http://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;
}

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

# 写于，改于。

CSS自适应视频播放器

共有 9 条评论

Shrek
江苏

从良未遂是个好人
九年前 Chrome 49 · iPhone iOS 9.3
回复
- S
  江苏
  *
  
  @Shrek 中肯。
  九年前 Opera 36 · Windows XP
  回复
从良未遂
江苏

非常感谢，难怪我插入的有些视频在iphone上看不见。
九年前 Google Chrome 49 · Windows 7
回复
- S
  江苏
  *
  
  @从良未遂不客气！同乐乐！
  九年前 Opera 36 · Windows XP
  回复
Pingback: 实用代码
山东
有点蓝
山东

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

需要用到quicktag吗？应该怎么加呢？求教了。
九年前 Maxthon 4 · Windows 8.1
回复
- S
  江苏
  *
  
  @有点蓝要加< div class = "media-wrap" >的，不然不能用。
  九年前 Google Chrome 48 · Mac OS X 10.11
  回复
从良未遂
江苏

今天使用的时候发现插入的视频不居中，应该修改哪里啊
八年前 Safari 10 · Mac OS X 10.12
回复
- S
  江苏
  *
  
  @从良未遂居中要在外加个div然后加个style：margin: 0 auto吧，我没试过，你试试看
  八年前 Wordpress App 8 · iPhone iOS 10.3.3
  回复

竹炉山房

自适应视频播放器CSS代码

共有 9 条评论

回复 S 取消回复