是否可以使用他们的 player.js 库在 Vimeo iframe 上使用自定义光标？答案

【问题标题】：Is it possible use a custom cursor over a Vimeo iframe using their player.js library?是否可以使用他们的 player.js 库在 Vimeo iframe 上使用自定义光标？
【发布时间】：2019-07-20 16:03:59
【问题描述】：

我为我们的设计工作室构建了一个网站，其中包含嵌入了 Vimeo 的 Player.js 库的 Vimeo 视频。我们有一个大型自定义光标，旨在用于整个网站，但显然光标不适用于 iframe。

我使用了一种解决方法来循环播放视频（不需要任何用户交互），在播放器上放置一个不可见的伪元素，从而使其仍被视为我的域。

.video__loop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

此页面包含不需要控件的背景循环视频示例，因此自定义光标没有问题： https://www.new.company/work/two-chairs

但是，我还创建了一个自定义播放器，其中包含需要用户交互的时间码和播放/暂停，因此光标技巧不起作用，因为我需要人们能够单击 Vimeo 对象。

这个页面有我制作的基本视频播放器的例子：https://www.new.company/work/nike-chantel-navarro

是否可以通过一个对象将点击传递到另一个对象？或者是否可以将点击定向到 Vimeo 对象？

根据文档，我应该可以使用 play 方法，只要它不在移动设备上（我不需要担心，因为我的光标问题在那里没有问题），但我不是能够让它工作。目前我依靠直接互动来开始视频。

https://github.com/vimeo/player.js/

play(): Promise<void, (PasswordError|PrivacyError|Error)>
Play the video if it’s paused. Note: on iOS and some other mobile
devices, you cannot programmatically trigger play. Once the viewer
has tapped on the play button in the player, however, you will be
able to use this function.

【问题讨论】：

标签： javascript iframe vimeo

【解决方案1】：

试试plyr.io播放器，它播放Vimeo和Youtube视频，你可以使用你自己的CSS。我尝试将您的css 添加到他们的demo 页面，效果很好：

html, body, iframe, a, * {
  cursor: url(https://www.new.company/img/new_cursor.svg) 10 10, pointer;
  cursor: -webkit-image-set(url(https://www.new.company/img/new_cursor.svg) 1x, url(https://www.new.company/img/new_cursor@2x.svg) 2x) 0 0, pointer;
}

它不适用于视频广告，而 Vimeo 和 Youtube 不会出现这种情况，因为您不能在播放视频广告的同时播放他们的视频，只有您可以使用自己托管的视频播放视频广告。

【讨论】：