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: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .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; } <!-- language: lang-html --> <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> <!-- end snippet -->