Перетаскиваемые регистры IFrame нажмите вместо сопротивления

Question

У меня есть IFrame на видео YouTube с контейнером вокруг него:

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

Что I'nm пытается выполнить это, чтобы сделать это видео перемещаемого через JQuery UI, но до сих пор когда он не перетаскивается. После некоторых исследований в эту тему, я пришел на следующее:

iframeFix: true 

в качестве опции в функции .draggable, однако, это не появлялось ничего делать, и моя проблема осталась.

После этого я попытался сделать DIV появляется на сопротивление в виде наложения сортов:

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

Это CSS я использовал для наложения, то я поместил DIV с классом frameOverlay случайным образом в моем HTML и в 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.