基于html5，父级块中添加video，不能全屏播放的问题解决。

来源：途锐财经网

使用video标签，视频总不能占满父级全屏，本来预算的10分钟工程，结果卡在video这里了，勤奋的小果，还是打算记下来，共勉。。

代码（css内容）：

代码（body内容）

视频

我们按照常规给video标签设置：height：100%；width：100%；

结果如下：

左图：(Google Chrome)高度达到100%；而宽度不能达到100%；右图：(Firefox)高度不能达到100%；而宽度达到100%；

左图：(Safari)高度达到100%；而宽度不能达到100%；右图：(Opera)高度不能达到100%；而宽度达到100%；

接着小果就尝试使用：

1.使用js获取父级的宽高，赋给video；结果：失败。

2.使用:-webkit-full-screen{}方法，没有起作用。

3.使用兼容...

。。累趴

之后小果就发现了简单易操作的方法：

css代码：（父级高度为0；设置padding-bottom；）

结果如下：

左图：(Google Chrome) 右图：(Firefox)

左图：(Safari) 右图：(Opera)

完美解决啊~

那么还有一个问题，padding-bottom的值是怎么得到的呢？

videoH：video的高

videoW：video的宽

videoTiW：父级的width ,使用的是百分比

padBotRes：padding-bottom的值

式子：

padBotRes = (videoH / videoW) * videoTiW