Learn more about Pascale
Service demo video
/* Full-width wrapper */
#intro-video-wrapper {
position: relative;
width: 100vw;
left: 50%;
margin-left: -50vw;
overflow: hidden;
}
/* Video responsive */
#intro-video {
width: 100%;
height: auto;
display: block;
}
/* Overlay “Enable sound” */
#unmute-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.6);
color: #fff;
padding: 0.8em 1.2em;
font-size: 1.1em;
border-radius: 4px;
cursor: pointer;
display: none; /* masqué par défaut */
z-index: 10;
}
window.addEventListener('load', function() {
var video = document.getElementById('intro-video');
var overlay = document.getElementById('unmute-overlay');
// Starts the muted video 3 seconds after loading
setTimeout(function() {
video.play().catch(function(err) {
console.warn('Unable to start the video:', err);
});
// Then show the button to enable sound
overlay.style.display = 'block';
}, 3000);
// On overlay click, unmute the video and hide the overlay
overlay.addEventListener('click', function() {
video.muted = false;
overlay.style.display = 'none';
// restart the video if needed
video.play().catch(function(err) {
console.warn('Playback interrupted:', err);
});
});
});
Enable sound