User Manipulated Frame - HTML/CSS/JS

Question

How can I make the below frame, once loaded, to allow for the user to drag and scale the size? Is this possible with HTML/CSS/JS?

<script>
    var frame;
    function addFrame() {
       frame = document.createElement('iframe');
       frame.height = "200px";
       frame.width = "200px";
       frame.setAttribute('id', 'superFrame');
       document.body.appendChild(frame);
    }
    function loadGoogle() {
       frame.setAttribute('src','http://www.google.com')
    }
</script>

Left is what I have, right is what I want but with the user setting the size via dragging the frame.

Image

http://stackoverflow.com/questions/6194302/how-can-i-cleanly-resize-an-iframe-with-dragging-functionality — j08691, May 08 '17 at 16:25
http://stackoverflow.com/questions/8117761/how-can-i-make-an-iframe-resizable — j08691, May 08 '17 at 16:27
http://stackoverflow.com/questions/7816372/make-iframes-resizable-dynamically — j08691, May 08 '17 at 16:27

score 0 · Accepted Answer · answered May 08 '17 at 16:28

src Responsive IFrames — The Right Way!

remove width and height attributes
set up a parent div for the iframe
make the containing div responsive, and the iframe with the following size/positioning rules:

iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

User Manipulated Frame - HTML/CSS/JS

1 Answers1