在iPhone图像框架内播放HTML5视频

Question

有人问了一个类似的问题（https://stackoverflow.com/a/15094340/1822824），他们得到了一个没有代码的基本答案。我按照他们的建议创建了我自己的代码。

我正在尝试在iPhone图像框架内播放HTML5视频。像这样：

我的图片是300像素乘629像素。问题是我在Safari 6（我正在瞄准的浏览器）中得到一个垂直滚动条，即使窗口足够大以便查看。滚动条也出现在我的代码小提琴上。

为什么我会看到这个垂直滚动条？

我的代码如下：

小提琴：http://jsfiddle.net/rZYTn/

HTML

<div class="myVideo">
<video width="253" height="447" controls autoplay>
  <source src="videos/keyboard.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>

CSS

.myVideo {
    background-image: url(iphone.png);
    background-repeat:no-repeat;
    width: 300px;
    height: 629px;
    padding-top: 93px;
    padding-left: 25px;
    overflow:hidden;
}

小提琴上的额外空间和滚动条：

Answer 1

额外空间是由于视频大小和div大小（宽度和高度）

<强>修复

.myVideo {
    background-image: url(iphone.png);
    background-repeat:no-repeat;
    width: 254px;
    height: 455px;
    padding-top: 10px;
    padding-left: 25px;
    overflow:hidden;
}

这也可能会删除滚动条。