Question

我有一个带有容器的YouTube视频的iFrame：

<div class="draggable resizable ui-draggable ui-draggable-handle">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe>
</div>

我想要实现的目标是通过jQuery UI使这个视频可以拖动，但是当它没有被拖动时仍然可以播放。经过对该主题的一些研究后，我发现了以下内容：

iframeFix: true

作为.draggable函数中的一个选项，然而，这似乎没有做任何事情，我的问题仍然存在。

之后我尝试在拖拽上显示div作为各种各样的叠加：

.frameOverlay
{
  height: 100%;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

这是我用于叠加层的CSS，然后我在我的HTML中随机放置了一个带有frameOverlay类的div，在Javascript中我这样做了：

$(".draggable").draggable({
  start: function(event, ui) {
     $('.frameOverlay').show();
   },
   stop: function(event, ui) {
    $(".frameOverlay").hide();
   }
})

但是，这也没有解决问题。 iframe仍然记录了作为点击的拖动内容，使其播放视频。这是我的问题的一个小问题：Click me

是否有人对此问题有解决方法？

感谢。

修改：我希望避免向iframe添加句柄，因为它会（稍微）给用户带来不便。

Answer 1

我建议如下：

示例：https://jsfiddle.net/Twisty/3rjy0efa/1/

<强> HTML

<div class="frameOverlay"></div>
<div class="draggable resizable">
  <div class="handle"></div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe>
</div>

<强> CSS

.handle {
  width: 558px;
  background: #ccc;
  border: 1px solid #000;
  border-radius: 4px;
  height: 23px;
  margin-bottom: -3px;
}

.frameOverlay {
  height: 100%;
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

<强>的JavaScript

$(".draggable").draggable({
  handle: ".handle",
  iframeFix: true,
  start: function(event, ui) {
    $('.frameOverlay').show();
  },
  stop: function(event, ui) {
    $(".frameOverlay").hide();
  }
});

这可以让你抓住不在iFrame中的内容。

Answer 2

以下是如果您可以启用/禁用对iFrame的访问权限的示例，如果可以使用拖动等已禁用的事件。

<强> HTML

<button class="btn-drag">Draggable</button>
<button class="active btn-play">I Frame Controls</button>
<br />
<br />
<div id="drag" class="draggable resizable ui-draggable ui-draggable-handle">
    <iframe id="frame" width="560" height="315" src="https://www.youtube.com/embed/Eeue7FWnNJs" frameborder="0" allowfullscreen=""></iframe>
</div>

<强>的Javascript

$(".draggable").draggable({
    iframeFix: true
});

$('.btn-drag, .btn-play').click(function(){
  if($(this).hasClass('btn-drag')){
    $('.btn-drag').addClass('active');
    $('.btn-play').removeClass('active');
    $('#frame').css('pointer-events','none');
  }
  else{
    $('.btn-drag').removeClass('active');
    $('.btn-play').addClass('active');
    $('#frame').css('pointer-events','auto');
  }
});

document.addEventListener("keydown", function (e) {  
  if(!e.keyCode === 39){
    return false;
  }
  if($('#frame').css('pointer-events') === 'auto'){
    $('.btn-drag, .btn-play').toggleClass('active');
    $('#frame').css('pointer-events','none');
  }
  else{
    $('.btn-play, .btn-drag').toggleClass('active');
    $('#frame').css('pointer-events','auto');
  }
});

Fiddle

可拖动的iFrame寄存器单击而不是拖动

2 个答案: