.tss-video {
position: relative;
display: block;
width: 100%;
aspect-ratio: var(--tss-video-ratio, 16/9);
overflow: hidden;
background: #000;
cursor: pointer;
} .tss-video--fill {
position: absolute;
inset: 0;
aspect-ratio: auto;
height: 100%;
}
.tss-video__thumb {
width: 100%;
height: 100%; object-fit: cover;
display: block;
border: 0;
}
.tss-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
line-height: 0;
}
.tss-video__play svg {
width: 100%;
height: 100%;
}
.tss-video__play-bg {
fill: #212121;
fill-opacity: 0.8;
transition: fill 0.15s ease, fill-opacity 0.15s ease;
}
.tss-video:hover .tss-video__play-bg,
.tss-video__play:focus-visible .tss-video__play-bg {
fill: #f00;
fill-opacity: 1;
}
.tss-video__play:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.tss-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}