带有 videoJS 的嵌入式视频 - Safari 的大小问题答案

【问题标题】：Embedded videos with videoJS - size issue with Safari带有 videoJS 的嵌入式视频 - Safari 的大小问题
【发布时间】：2013-04-11 17:33:44
【问题描述】：

好的，我有一些东西可以在 Chrome 上完美运行，但在 Safari 中有点奇怪。

第一个视频播放良好，完全符合我的要求，但在页面下方我有另一个嵌入视频，即使我为每个视频使用完全相同的代码，除了“自动播放”和视频文件当然，第二个真的很大，好像是两倍高..

就像每次都在增加 100%。

这是第一个的html

<video autoplay id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" poster="../images/posters/1969.png"
data-setup="{}"> 
<source src="../videos/1969.mp4" type='video/mp4'>
<source src="../videos/1969.webm" type='video/webm'>
</video>

第二个

<video id="anothervideo" class="video-js vjs-default-skin" controls
preload="auto" poster="../images/posters/1969.png"
data-setup="{}"> 
<source src="../videos/video-2.mp4" type='video/mp4'>
<source src="../videos/video-2.webm" type='video/webm'>
</video>

认为它可能使用相同的 id 导致问题，所以使用了两个单独的，但没有做任何事情，这是 ids 的 css

min-height: 100%; min-width: 100%; height: auto !important; width: auto !important;

不知道发生了什么！

【问题讨论】：

您有可以链接到的工作示例吗？
oreardon.com/test/1969/index.html - 那里没有视频，但你明白我的意思，我也一直在玩一些东西，所以它改变了一点，现在更大了！
该页面上的每个部分（块）在我看来都很好。我在 Chrome Dev: Mac 上。每个部分都与窗口一样高和宽，而且它们看起来都没有比它们需要的更大或更小。所以你能解决它还是它仍然在发生？什么浏览器你在用吗？
不，我说 Chrome 是完美的，只是在 Safari 中，第二个视频的播放器非常大..！

标签： css html video safari

【解决方案1】：

我错过了它在 Safari 中的那部分。但我确实有一个解决方案给你。所以它似乎确实是导致问题的最小高度。你可以做的是添加这个 CSS：

#my_video_2{
    min-height:inherit;
}

似乎在第二个视频上出现了问题，但第一个视频需要它才能正常显示。

看看这是否有效。

【讨论】：

这使它一起消失了，除非我做错了什么，否则我已经更新了该链接^^编辑：它在那里，但高度为 0px
我继续使用 max-height: 100% 让它在加载时正确显示；但只要你按下播放按钮，视频就会消失。令人沮丧！
你必须继续玩它。您正在对 CSS 进行重大更改（这有利于测试），但我无法跟上您目前正在做的事情以及之前的工作。
没问题，感谢您的帮助。不会让这打败我。