Although the resize: property is not supported in Firefox when used in iframes , as already mentioned in the other response that was mentioned in MDN, it is still a property that will work perfectly on some others elements.
You do not need a hack or smart library to get the desired effect, just create a <div> and in it you will add resize: the display: inline-block; ), then put the size you want and within <div> put your <iframe> , defining the width and height as 100%
I've created an example that works with horizontal, vertical, and both:
Note1: You must add overflow: hidden or overflow: auto or overflow: scroll to the element you want to use resize: , except for elements <textarea> that already has scroll by default ( except you use overflow: visible; )
Note²: position:relative; is required to work in Chrome, otherwise the cursor to resize will be overridden by the iframe
.resize, .resize-v, .resize-h {
position: relative;
display: inline-block;
overflow: hidden;
min-width: 50px; /* define largura minima */
min-height: 50px; /* define altura minima */
width: 200px; /* define largura padrão/inicial */
height: 200px; /* define altura padrão/inicial */
}
.resize-v {
resize: vertical;
}
.resize-h {
resize: horizontal;
}
.resize {
resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}
.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
background-color: transparent;
width: 100%;
height: 100%;
resize: none;
border: none;
}
/* as cores abaixo são apenas para você diferenciar, pode remove-las */
.resize {
background-color: #f00;
}
.resize-v {
background-color: #00f;
}
.resize-h {
background-color: #fc0;
}
<div class="resize">
<iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>
<hr>
<div class="resize-h">
<iframe srcdoc="redimensiona horizontal"></iframe>
</div>
<hr>
<div class="resize-v">
<iframe srcdoc="redimensiona vertical"></iframe>
</div>
Alternative
The only problem in the example is that in Chrome when the iframe gets small the "cursor" to drag some when the scroll appears, a way around this would be by discounting the height of iframes, like this:
height: calc(100% - 14px);
An example:
.resize, .resize-v, .resize-h {
position: relative;
display: inline-block;
overflow: hidden;
min-width: 50px; /* define largura minima */
min-height: 50px; /* define altura minima */
width: 200px; /* define largura padrão/inicial */
height: 200px; /* define altura padrão/inicial */
}
.resize-v {
resize: vertical;
}
.resize-h {
resize: horizontal;
}
.resize {
resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}
.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
background-color: transparent;
width: 100%;
height: calc(100% - 14px);
resize: none;
border: none;
}
/* as cores abaixo são apenas para você diferenciar, pode remove-las */
.resize {
background-color: #f00;
}
.resize-v {
background-color: #00f;
}
.resize-h {
background-color: #fc0;
}
<div class="resize">
<iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>
<hr>
<div class="resize-h">
<iframe srcdoc="redimensiona horizontal"></iframe>
</div>
<hr>
<div class="resize-v">
<iframe srcdoc="redimensiona vertical"></iframe>
</div>
