Apesar da propriedade resize:
não ser suportada no Firefox quando usado em iframes, como já dito na outra resposta que foi mencionado no MDN, ainda sim é uma propriedade que vai funcionar perfeitamente em alguns outros elementos.
Não é necessário nenhum hack ou biblioteca mirabolante para conseguir chegar no efeito desejado, basta criar uma <div>
e nela você irá adicionar o resize:
(recomendo adicionar o display: inline-block;
), então coloque o tamanho que desejar e dentro do <div>
coloque o seu <iframe>
, definindo a largura e altura como 100%
, veja um exemplo que criei:
Nota: é necessário adicionar o
overflow: hidden
ouoverflow: auto
ouoverflow: scroll
no elemento que deseja usar oresize:
, exceto notextarea:
que já tem scroll por padrão (exceto se foi removido usandooverflow: visible;
)
.resize, .resize-v, .resize-h {
display: inline-block;
min-width: 200px;
min-height: 200px;
overflow: hidden;
}
.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 {
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>