<a href="#openVideo" id="openVideoBtn" class="block-modal-video">
<div class="block-modal-video__container">
<video autoplay preload muted loop>
<source src="../../videos/xxl-video-homepage.mp4" type="video/mp4">
<source src="../../videos/xxl-video-homepage.webm" type="video/webm">
</video>
<h2>Donnez<br>une autre dimension<br>à vos événements</h2>
</div>
<span>Lire la vidéo</span>
</a>
<a href="#openVideo" id="openVideoBtn" class="block-modal-video">
<div class="block-modal-video__container">
<video autoplay preload muted loop>
<source src="{{path '/videos/xxl-video-homepage.mp4'}}" type="video/mp4">
<source src="{{path '/videos/xxl-video-homepage.webm'}}" type="video/webm">
</video>
<h2>Donnez<br>une autre dimension<br>à vos événements</h2>
</div>
<span>Lire la vidéo</span>
</a>
/* No context defined for this component. */
.block-modal-video {
position: relative;
display: block;
height: 100%;
@include mediaWQuery($media-query-l) {
border-radius: 0 $border-radius-l $border-radius-l $border-radius-l;
box-shadow: $box-shadow-l;
}
&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
&__container {
position: relative;
@include aspect-ratio(1, 1);
overflow: hidden;
@include mediaWQuery($media-query-m) {
&::before {
padding-top: 56.25%;
}
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(255, 87, 248, 0) 0%,
rgba(112, 0, 161, 0.8) 100%
);
z-index: 2;
}
@include mediaWQuery($media-query-l) {
border-radius: 0 $border-radius-l $border-radius-l $border-radius-l;
}
video {
display: none;
position: absolute;
width: calc(100% + 10px);
height: calc(100% + 10px);
object-fit: cover;
top: -5px;
left: -5px;
z-index: 1;
@include mediaWQuery($media-query-l) {
display: block;
}
}
h2 {
@include absPosition(
$top: false,
$right: false,
$bottom: 1.5rem,
$left: 1.5rem
);
color: $c-white;
margin: 0;
padding: 0 0 1rem 0;
line-height: 1;
z-index: 3;
@include mediaWQuery($media-query-m) {
font-size: rem(64);
padding: 0;
}
}
}
> span {
display: block;
position: absolute;
bottom: 0;
width: calc(100% - 4rem);
left: 2rem;
padding: 9px 46px;
border-radius: 50px;
font-size: rem(21);
font-family: $font-primary;
color: $c-white;
background-color: #0d0c0c;
text-align: center;
transform: translateY(50%);
z-index: 9;
transition: 0.3s ease;
@include mediaWQuery($media-query-m) {
left: initial;
right: 3rem;
width: auto;
}
}
&:hover,
&:focus {
> span {
transform: scale(1.05) translateY(50%);
background-color: lighten(#0d0c0c, 10%);
@include mediaWQuery($media-query-m) {
transform: scale(1.1) translateY(50%);
}
}
}
}
.modal-video {
position: fixed;
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-image: $c-gradient-fade;
z-index: 9999999;
&.showing-video {
.modal-video__container {
top: 50%;
}
}
&__container {
position: absolute;
width: 80vw;
margin: 0 auto;
max-width: 1280px;
background: $c-white;
border: 2px solid $c-gold;
box-shadow: $box-shadow-l;
transform: translateY(-50%);
transition: top 300ms ease;
top: 200%;
&-close {
position: absolute;
display: block;
font-size: 0;
top: -65px;
right: 0;
width: 50px;
height: auto;
z-index: 99999999999;
transform: scale(0.6);
.button {
display: block;
padding: initial;
background: transparent;
font-size: 0;
-webkit-appearance: none;
}
}
&-iframe {
position: relative;
padding-bottom: 53.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width: 100%;
@include mediaWQuery($media-query-m) {
padding-bottom: 54.25%;
}
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}
window.addEventListener("load", () => {
if (document.body.classList.contains("home")) {
const iframe = document.querySelector(".modal-video__container iframe"),
player = new Vimeo.Player(iframe);
jQuery("#openVideoBtn").on("click", function() {
jQuery(".modal-video")
.css("display", "flex")
.hide()
.fadeIn()
.addClass("showing-video");
const targetElement = document.querySelector("body");
bodyScrollLock.disableBodyScroll(targetElement);
player.play();
});
jQuery("#closeVideoBtn, .modal-video").on("click", function() {
closeVideo();
});
jQuery(document).keyup(function(e) {
if (e.key === "Escape") {
// escape key maps to keycode `27`
if (jQuery(".modal-video").hasClass("showing-video")) {
closeVideo();
}
}
});
const closeVideo = () => {
jQuery(".modal-video")
.removeClass("showing-video")
.fadeOut();
const targetElement = document.querySelector("body");
bodyScrollLock.enableBodyScroll(targetElement);
player.pause();
};
}
});
There are no notes for this item.