.yst-thumb-wrapper {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
cursor: pointer;
border: var(--yst-thumb-border, none);
border-radius: var(--yst-thumb-radius, 16px);
box-shadow: var(--yst-thumb-shadow, none);
display: block;
}
.yst-thumb-wrapper picture,
.yst-thumb-wrapper .yst-thumb-img {
display: block;
width: 100%;
height: auto;
} .yst-thumb-wrapper::before {
content: "";
display: block;
padding-top: 56.25%; }
.yst-thumb-wrapper picture,
.yst-thumb-wrapper .yst-thumb-img,
.yst-thumb-wrapper > picture > img {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
} .yst-play-icon {
position: absolute;
top: 50%;
left: 50%;
width: var(--yst-icon-size, 72px);
height: var(--yst-icon-size, 72px);
transform: translate(-50%, -50%);
border-radius: 999px;
background: var(--yst-icon-bg, #ffffff);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
opacity: 0.95;
}
.yst-play-icon .yst-play-triangle {
width: 0;
height: 0;
border-left: 18px solid rgba(0,0,0,0.85);
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
margin-left: 3px;
}
.yst-thumb-wrapper:hover .yst-play-icon {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 12px 30px rgba(0,0,0,0.45);
} #yst-video-overlay {
position: fixed;
z-index: 999999;
inset: 0;
background: rgba(0,0,0,0.85);
display: flex;
align-items: center;
justify-content: center;
}
#yst-video-overlay-inner {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 10px;
aspect-ratio: 16/9;
background: #000;
}
#yst-video-overlay-inner iframe {
width: 100%;
height: 100%;
border: 0;
}
#yst-video-overlay-close {
position: fixed;
top: 14px;
right: 18px;
color: #ffffff;
font-size: 26px;
cursor: pointer;
z-index: 1000000;
font-weight: 700;
} .yst-iframe-fallback iframe {
width: 100%;
aspect-ratio: 16/9;
}