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);
});
});
