.bandeau-video-fond__placeholder {
margin: 0;
padding: var(--wp--preset--spacing--2);
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--2);
background: var(--wp--preset--color--tertiary);
}
.bandeau-video-fond {
position: relative;
min-height: var(--bvf-min-h, 520px);
overflow: hidden;
z-index: 1000;
}
.bandeau-video-fond__bg {
position: absolute;
inset: 0;
z-index: 0;
background: #000;
}
.bandeau-video-fond__poster,
.bandeau-video-fond__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bandeau-video-fond__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, var(--bvf-overlay, 0.35));
pointer-events: none;
}
.bandeau-video-fond__inner {
position: relative;
z-index: 2;
min-height: inherit;
display: grid;
place-items: center;
padding: var(--wp--preset--spacing--4);
}
.bandeau-video-fond__content {
width: var(--wp--style--global--content-size, 1296px);
margin-left: auto;
margin-right: auto;
color: var(--wp--preset--color--white);
} .bandeau-video-fond__content :where(p, li, a, strong, em, span, h1, h2, h3, h4, h5, h6) {
color: inherit;
}
.bandeau-video-fond__content a {
text-decoration-color: currentColor;
}
.bandeau-video-fond__play {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
.bandeau-video-fond__play--preview {
cursor: default;
}
.bandeau-video-fond__play-icon {
width: 64px;
height: 64px;
display: block;
position: relative;
}
.bandeau-video-fond__play-icon img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.bandeau-video-fond__play-hover {
opacity: 0;
}
.bandeau-video-fond__play:hover .bandeau-video-fond__play-default,
.bandeau-video-fond__play:focus-visible .bandeau-video-fond__play-default {
opacity: 0;
}
.bandeau-video-fond__play:hover .bandeau-video-fond__play-hover,
.bandeau-video-fond__play:focus-visible .bandeau-video-fond__play-hover {
opacity: 1;
}
.bandeau-video-fond__play:hover .bandeau-video-fond__play-icon img,
.bandeau-video-fond__play:focus-visible .bandeau-video-fond__play-icon img {
transform: scale(1.06);
}
.bandeau-video-fond.is-editor .bandeau-video-fond__play {
pointer-events: none;
}
@media (max-width: 1024px) {
.bandeau-video-fond {
min-height: 420px;
}
.bandeau-video-fond__play-icon {
width: 52px;
height: 52px;
}
}
@media (max-width: 768px) {
.bandeau-video-fond {
min-height: 360px;
}
.bandeau-video-fond__inner {
padding: var(--wp--preset--spacing--3);
}
.bandeau-video-fond__play-icon {
width: 44px;
height: 44px;
}
}