HTML:
<section> <div class="mapContainer"> <iframe scrolling="no" src="https://www.google.com/maps/embed?pb=!4v1615977483100!6m8!1m7!1sPLRSXqOqx8IAAAQvxQy-3w!2m2!1d46.66770001268814!2d-0.2529888975152517!3f0!4f0!5f0.7820865974627469" style="border:0;" allowfullscreen="" loading="lazy"></iframe> <div class="btnIframe">Démarrer</div> </div> </section>
CSS:
.mapContainer, .mapContainer iframe{ width: 100%; height: 80vh; } .mapContainer{ background-color: rgba(0, 0, 0, 0.8); position: relative; display: flex; justify-content: center; align-items: center; } .mapContainer iframe{ display: block; pointer-events: none; position: relative; z-index: -1; position: relative; } .mapContainer iframe.clicked{ pointer-events: auto; } .btnIframe{ font-size: xx-large; font-weight: 700; color: white; position: absolute; cursor: pointer; }
JavaScript (jQuery):
$(function(){ $(".mapContainer").click(function(){ $("iframe").css("z-index", "1"); }) $(".mapContainer").click(function(){ $(this).find("iframe").addClass("clicked"); setTimeout(function(){ $("iframe").removeClass("clicked"); }, 5000); }); });