我得到了这个工作。这是一个更新的CodePen。
https://codepen.io/VikR/pen/Wgwwoa
关键是这个
overflow
视频容器中的代码：
#pipContainer {position: relative;
width: 300px;
height: 300px;
border: 5px solid black;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}</code>
这是一个艰难的追踪。谷歌搜索“safari z-index视频元素”显示许多人对此有困难，2011年至2018年的帖子出现在第一页的结果中。在其他情况下工作的许多修复程序在这种情况下似乎不起作用，可能是因为我将一个视频元素叠加在另一个视频元素之上。找到了有效的修复程序
这里。
注1：
overflow: ‘hidden’
也有效，并具有隐藏滚动条的额外好处。
注意2：我的印象是可能无法通过javascript更改视频尺寸。在我的应用程序中，我目前通过引用将它们设置在HTML呈现中
screen.height
。