尝试调整此示例中的 DIV 大小 -> http://jsbin.com/ixesak/edit#preview
光标在 Youtube-Player 上移动(调整大小或拖动时),结果是调整大小功能停止。
希望有人能帮助我。
JS
$(document).ready(function()
{
$('#test').draggable().resizable();
});
HTML
<div id="test" style="padding:20px; background-color:#f00;">
<iframe class="youtube-player" type="text/html" width="100%" height="100%" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe>
</div>
更新:一个解决方案,但可能不是最好的?
http://jsbin.com/ixesak/7/edit
最佳答案
使 iframeFix 覆盖在 iFrame 上,因为 iframe 正在接管鼠标事件。设置 iframeFix 的宽度和高度,以便调整大小的句柄可见,并根据需要设置其他必要的 css 人员。
<div id="cont" style="height:1000px; width:1000px; background-color:grey;">
<div id="test" style="padding:20px; background-color:#f00;">
<div id="iframeFix" style="display:block; background:transparent; position:absolute; width:100%; height:100%; z-index:9999999;"></div>
<iframe class="youtube-player" type="text/html" width="100%" height="100%" style="z-index:2000!important;" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe>
</div> </div>
关于Jquery - 调整大小或拖动内部有 iframe 的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7901721/