代码如下：
<!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高出几个像素，从而导致底部有黑边？
補充下，看似這個黑邊是因為父元素樣式裡有了
background屬性，具體來說是background-color這個屬性，至於成因是什麼，實話講我也不知道…目前猜測原因可能是跟video預設的display是inline有關係。
所以解應該是：
加上
font-size: 0;；去掉
background/background-color屬性；給
<video>加上display: block;樣式。因為你的父元素videoContainer沒有高度，當
**解決方法：
1、刪除contorl屬性
2、給父元素高度，或用padding撐開等**
其實這是一個html的bug，父級的font size設為0就正常了。 。