How to make iframe draggable from center using jquery?

Question

I have made an iframe and i want to make it draggable using jqueryui, but it is only dragging from corner of div, can anyone tell me how to make iframe draggable from center? Following is my code:

 <html>
<head>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function(){
            $( ".main" ).draggable({cancel:null});
        });
    </script>
    <style type="text/css">
        .main{
            background-color:transparent;
            height: 100px;
            width: 100px;
        }
        .main2{                     
            height: 100%;
            width: 100%;
        }
    </style>            
    <div class="main">
        <iframe src="https://www.youtube.com/v/nkS_Ar0Yad0"></iframe>
    </div>          
</body>
</html>

I have created a jsfiddle, but from your code it does not seems draggable: https://jsfiddle.net/silviagreen/n8L06vka/ — silviagreen, Mar 09 '16 at 09:48
it is dragging from corner of div, but i want make it draggble from the center of iframe,is it possible? — Abhishek Kumar, Mar 09 '16 at 09:58

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

For a fast solution you could set the iframes CSS as:

iframe{
  position:relative;
  z-index:-1;
}

But you probably won't be able to navigate inside the iframe (I did not tested this). So I recommend you this post

edited May 23 '17 at 12:07

Community

1
1

answered Mar 09 '16 at 10:57

Lucas

100
12

How to make iframe draggable from center using jquery?

1 Answers1