当页面上有多个视频时，如何定位特定的 Vimeo 视频？

Question

我有几个从 Vimeo 嵌入的视频，当您将鼠标悬停在视频上时，我想显示一个包含一些信息的叠加层。叠加层会阻止播放按钮，因此我希望在您单击叠加层时播放视频。它适用于单个视频，但是当有多个视频时，我无法让播放命令针对正确的视频。这是我的脚本：

$(".overlay").click(function() {
  $(this).toggleClass("playButton pauseButton");
  var parent = $(this).parent();
  var iframe = document.getElementById("vimeo");
  var player = $f(iframe)
  var paused = player.api('paused()');

 var playButton = $(parent).children(".playButton");
 $(playButton).click( function () {
    player.api('play');
  });

  var pauseButton = $(parent).children(".pauseButton");
  $(pauseButton).click( function () {
    player.api('pause');
  });
});

问题似乎出在这一行

var iframe = document.getElementById("vimeo");

这会提取每个视频，而不仅仅是与叠加层关联的视频。我试过这个：

var iframe = $(this).siblings("#vimeo");

但它似乎不喜欢 jquery，我得到一个错误。

Vimeo 应该是一个类而不是一个 id，但我无法让它与 getElementById 以外的任何方法一起使用。

Answer 1

您能否向每个 iframe 添加类以用于选择单个 iframe？

已编辑，因为我的第一个建议不好。