代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.videoContainer {
width: 70%;
height: auto;
background: #000;
}
</style>
</head>
<body>
<p class="videoContainer" >
<video id="myVideo" controls preload="auto" width="100%" height="100%" >
<source src="test.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</p>
</body>
</html>
最终的显示效果：
我的疑惑是：为什么父元素p会比video高出几个像素，从而导致底部有黑边？
PHPz2017-04-17 15:00:35
補充下，看似這個黑邊是因為父元素樣式裡有了background屬性，具體來說是background-color這個屬性，至於成因是什麼，實話講我也不知道…
目前猜測原因可能是跟video預設的display是inline有關係。
所以解應該是：
加上font-size: 0;；
去掉background/background-color屬性；
給<video>加上display: block;樣式。
