如何在滚动时浮动 iframe src 内播放的视频当视频超出视口时

如何解决如何在滚动时浮动 iframe src 内播放的视频当视频超出视口时

我的用例很简单，如本 codepen for direct video tags

所示

<section class="videowrapper videoTag">
        <a href="javascript:void(0);" class="close-button"></a>
        <div class="gradient-overlay"></div>
        <i class="fa fa-arrows-alt" aria-hidden="true"></i>
        <video class="initial_video" loop="" controls="">
            <source id="" src="https://d2cstorage-a.akamaihd.net/atl/Brunomars/Bruno-VersaceOnTheFloor.mp4" type="video/mp4">
        </video>
    </section>

唯一的区别是我混合了直接视频和 iframe 标签。

 <div class="video-wrapper"> 
  <a href="javascript:void(0);" class="close-button"></a>
  <iframe   src="https://codepen.io/technotech/full/poRqdvN"></iframe>
</div>

即 我有多个 iframe，其 src URL 为 HTML/页面（视频在此 HTML/页面中）。一旦页面（包含多个 iframe 和直接视频标签）被加载，用户点击任何一个视频（直接视频标签的视频或 iframe 的视频）播放，如果它超出视口，则它应该浮动。

如果第一个视频在浮动时播放另一个视频，那么如果第二个视频离开视口，则第二个视频应替换浮动位置上的第一个视频

这是我为我的用例创建的 codepen2。我尝试了上面 codepen for direct video tags 中使用的方法，但它不适用于 iframe HTML src 视频，因为我猜它无法向这些视频注入事件和 ID。

如有遗漏请见谅。