How to Make an Iframe Resizable

Make IFrames resizable dynamically

Your best bet really is to use a library to do this, such as jQueryUI Resizable -- there are a lot of inter-browser quirks with doing this right. Especially when you need to allow the user to specify an arbitrary size/resize, and a draggable resize handle is almost always the most intuitive way to allow users to resize an element. Setting the width/height of the iframe directly should be okay if you are just resizing the iframe, but that doesn't do anything to get the new width/height from the user in an intuitive way.

Also see Resizing iFrame with jQuery UI -- you need to wrap the iframe in a div, set the iframe to height=100% width=100%, and make the div resizable. Drag-to-resize will not work correctly if you make the bare iframe Draggable. (This is an event bubbling limitation in some browsers, not a jQuery bug per se.)

How can I cleanly resize an iFrame with dragging functionality?

Iirc, the classical method is to put the IFrame inside of a div and make that div re-sizable; also make the iFrame's width and height at 100%.

If you're using JQuery though, can you not use jQuery.load('uri') instead of an iFrame ? I believe it's preferable in many situations.

Html resize iframe automatically to device size

In most modern browsers you can use vw and vh units which are equal to 1% of screen width and height respectively:

<div  style="position:absolute; top:50px; left:0px">
  <iframe style="border: none; width: 100vw; height: 100vh;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>

If you are targeting old browsers, you can set width: 100%; height: 100%; for the iframe and its parent div:

<div  style="position:absolute; top:50px; left:0px; width: 100%; height: 100%;">
  <iframe style="border: none; width: 100%; height: 100%;" src="./RedMan2.html" width="1350" height="900"></iframe>
</div>

How to automatically resize iframe content size when browser window resize?

Your site is restricted from making changes to the content of an iframe. If you control the site inside the iframe, you can set up a message-system between the two sites. It might be worth checking if one exists even if you don't control the other site.

Otherwise, I would recommend simply refreshing the content of the iframe:

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

As misorude mentioned in a comment you should contain this line so it doesn't fire immediately upon resize, since that would send an unreasonable amount of requests to the remote site.

Making an iframe resize according to the window size

Wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.

<div class="videoWrapper">
<iframe src='https://www.liveflightapp.com/embed?key=b1371aa1-dea8-41cd-af74-8fda634b3a5d' width='100%;' height='500px;' frameborder='0' scrolling='no'></iframe>
</div>

And then apply the following style properties..

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

May be that helps..