<!-- Un div que contenga al iframe, ya que no tendremos otra forma de poner una imagen por encima. Un elemento con z-index no se pondrá por encima de un iframe.

Este elemento tendrá un ID o una clase para marcar los estilos de CSS y un Onclick para ejecutar la función

La imagen se pondrá por medio de un background CSS en el elemento padre.

-->

<div id="iframeboxing"

onclick="load_on_iframe()"

style="background: url('https://carlos.sanchezdonate.com/wp-content/uploads/onload-iframe.jpg');">

  <!-- El Iframde debe contener un ID bien definido, una clase para añadirle un atributo de visibility hidden y una altura y anchira como en todos los divs-->

<iframe id="iframeonclick" class="hidden" style="border: 0;" src="" width="600" height="450" allowfullscreen="allowfullscreen">

</iframe>

</div>

​

/* La configuración del elemento padre del iframe con CSS a nuestro gusto.

Es necesario que la altura esté con padding y no con height, un cursor pointer por usabilidad, un position relative y un overflow hidden. Respecto al tamaño del background recomiendo un cover

*/

#iframeboxing {

    width: 600px;

    padding-top: 450px;

    margin: auto;

    cursor: pointer;

    background-size: cover!important;

    position: relative;

    overflow: hidden;

}

/* Estos deben ser los estilos del iframe en cuestión*/

iframe#iframeonclick{

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    border: none;

}

/* La clase para ocultar un elemento */

.hidden {

    visibility: hidden;

}

function load_on_iframe() {

   //Seleccionamos el Iframe:

  document.getElementById("iframeonclick").setAttribute("onClick", "");

  // Eliminamos la clase hidden

    document.getElementById("iframeonclick").className = document.getElementById("iframeonclick").className.replace(/(?:^|\s)hidden(?!\S)/g, "");

  // Insertamos el la URL del elemento embebbido en nuestro SRC

    document.getElementById("iframeonclick").src =

        "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12640.309781091826!2d-0.9916284999999999!3d37.62386605!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1659971988650!5m2!1ses!2ses";

}