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吗？

编辑是因为我的第一个建议很糟糕。

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

1 个答案: