Modificar Dimensiones de iFrame

INICIO
Ancho  

Alto     


CODE

    <h1>Modificar Dimensiones de iFrame</h1>
<div id="bloque-modificar">    
  <div id="caja-variables">
    Ancho   <input type="number" id="widthInput" value="400"><br><br>
    Alto      <input type="number" id="heightInput" value="300"><br><br>
    <button id="updateButton">Actualizar Dimensiones</button>
     <div class="clean"></div>
   </div>    
        <iframe id="myIframe" src="https://www.example.com" width="400" height="300" frameborder="0"></iframe>
        <div class="clean"></div>
   </div>      
    <script>
        const widthInput = document.getElementById("widthInput");
        const heightInput = document.getElementById("heightInput");
        const updateButton = document.getElementById("updateButton");
        const myIframe = document.getElementById("myIframe");

        updateButton.addEventListener("click", () => {
            const newWidth = widthInput.value;
            const newHeight = heightInput.value;
            myIframe.width = newWidth;
            myIframe.height = newHeight;
        });
    </script>