.lts-video-block video {
width: 100%;
display: block;
height: auto;
object-fit: contain;
} .lts-video-block.h-mobile-vh-100 {
height: 100vh;
}
.lts-video-block.h-mobile-vh-60 {
height: 60vh;
}
.lts-video-block.h-mobile-vh-40 {
height: 40vh;
}
.lts-video-block.h-mobile-vh-100 video,
.lts-video-block.h-mobile-vh-60 video,
.lts-video-block.h-mobile-vh-40 video {
height: 100%;
object-fit: cover;
}
.lts-video-block.h-mobile-aspect video {
aspect-ratio: 16/9;
height: auto;
object-fit: contain;
} @media (min-width: 768px) {
.lts-video-block.h-tablet-vh-100 {
height: 100vh;
}
.lts-video-block.h-tablet-vh-60 {
height: 60vh;
}
.lts-video-block.h-tablet-vh-40 {
height: 40vh;
}
.lts-video-block.h-tablet-vh-100 video,
.lts-video-block.h-tablet-vh-60 video,
.lts-video-block.h-tablet-vh-40 video {
height: 100%;
object-fit: cover;
}
.lts-video-block.h-tablet-aspect video {
aspect-ratio: 16/9;
height: auto;
object-fit: contain;
}
} @media (min-width: 1024px) {
.lts-video-block.h-desk-vh-100 {
height: 100vh;
}
.lts-video-block.h-desk-vh-60 {
height: 60vh;
}
.lts-video-block.h-desk-vh-40 {
height: 40vh;
}
.lts-video-block.h-desk-vh-100 video,
.lts-video-block.h-desk-vh-60 video,
.lts-video-block.h-desk-vh-40 video {
height: 100%;
object-fit: cover;
}
.lts-video-block.h-desk-aspect video {
aspect-ratio: 16/9;
height: auto;
object-fit: contain;
}
}
.video-wrapper {
position: relative;
}
.video-play-toggle,
.video-audio-toggle {
position: absolute;
z-index: 2;
border: none;
background: rgba(0,0,0,0.5);
color: white;
font-size: 2rem;
padding: 0.5rem 1rem;
cursor: pointer;
transition: 0.3s;
} .video-play-toggle {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} .video-audio-toggle {
bottom: 10px;
left: 10px;
font-size: 1.5rem;
}
.video-play-toggle svg,
.video-audio-toggle svg {
width: 48px;
height: 48px;
display: block;
pointer-events: none;
}
.lts-video-block .video-inner {
margin: 0 auto;
max-width: 1200px;
padding: 0 20px;
}
.lts-video-block.alignfull .video-inner.full {
max-width: 100%;
padding: 0;
}
.lts-video-block .video-wrapper {
position: relative;
height: 100%;
}
.lts-video-block.h-mobile-vh-100 .video-wrapper,
.lts-video-block.h-tablet-vh-100 .video-wrapper,
.lts-video-block.h-desk-vh-100 .video-wrapper,
.lts-video-block.h-mobile-vh-60 .video-wrapper,
.lts-video-block.h-tablet-vh-60 .video-wrapper,
.lts-video-block.h-desk-vh-60 .video-wrapper {
height: 100%;
}
.video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity 0.3s;
pointer-events: none;
}
.video-wrapper.playing .video-poster {
opacity: 0;
}
.video-wrapper {
position: relative;
height: 100%;
}
.video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
transition: opacity 0.3s;
}
.video-play-toggle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
border: 10px solid white;
border-radius: 100%;
padding: 1.2rem;
cursor: pointer;
}
.video-audio-toggle {
position: absolute;
z-index: 2;
bottom: 10px;
left: 10px;
background: rgba(0,0,0,0.5);
border: none;
padding: 0.5rem;
cursor: pointer;
}
.video-play-toggle svg,
.video-audio-toggle svg {
width: 48px;
height: 48px;
pointer-events: none;
}