ドラッグ可能なiFrameのは、私はそれのまわりの容器でYouTubeの動画へのiFrameを持っている代わりに、ドラッグ

Question

のクリックを登録します。

I'nmを達成しようとして何

<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

ここでは、ドラッグなどの無効なイベントが利用可能になった場合の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

Answer 2

私は次のことをお勧めします：

例：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の内部ではなく、上につかむために何かを与えます。