.speedvitals-facade {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
background: #000;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
}
.speedvitals-facade:hover {
transform: scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
} .speedvitals-facade-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
} .speedvitals-facade.no-thumbnail .speedvitals-facade-inner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
} .speedvitals-facade-tiktok.no-thumbnail .speedvitals-facade-inner {
background: linear-gradient(135deg, #00f2ea 0%, #ff0050 100%);
} .speedvitals-facade-instagram.no-thumbnail .speedvitals-facade-inner {
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
} .speedvitals-facade-google-maps.no-thumbnail .speedvitals-facade-inner {
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
} .speedvitals-play-btn {
position: relative;
z-index: 10;
width: 68px;
height: 48px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0.9;
}
.speedvitals-play-btn:hover {
transform: scale(1.2);
opacity: 1;
}
.speedvitals-play-btn:focus {
outline: 2px solid #fff;
outline-offset: 4px;
}
.speedvitals-play-btn svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
} .speedvitals-facade-youtube .speedvitals-play-btn svg path:first-child {
fill: #f00;
}
.speedvitals-facade-youtube .speedvitals-play-btn svg path:last-child {
fill: #fff;
} .speedvitals-facade-vimeo .speedvitals-play-btn {
width: 80px;
height: 80px;
}
.speedvitals-facade-vimeo .speedvitals-play-btn svg {
filter: none;
} .speedvitals-facade-generic .speedvitals-play-btn svg,
.speedvitals-facade-tiktok .speedvitals-play-btn svg,
.speedvitals-facade-instagram .speedvitals-play-btn svg {
width: 80px;
height: 80px;
} .speedvitals-facade:hover .speedvitals-facade-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
pointer-events: none;
} .speedvitals-facade.loading {
pointer-events: none;
}
.speedvitals-facade.loading .speedvitals-play-btn {
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
} .speedvitals-facade iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
} @media (max-width: 768px) {
.speedvitals-play-btn {
width: 56px;
height: 40px;
}
.speedvitals-facade-vimeo .speedvitals-play-btn,
.speedvitals-facade-generic .speedvitals-play-btn {
width: 64px;
height: 64px;
}
} .speedvitals-facade:focus-within {
outline: 2px solid #4285f4;
outline-offset: 2px;
} @media (prefers-contrast: high) {
.speedvitals-facade {
border: 2px solid currentColor;
}
.speedvitals-play-btn {
border: 2px solid #fff;
}
} @media (prefers-reduced-motion: reduce) {
.speedvitals-facade,
.speedvitals-facade-inner,
.speedvitals-play-btn {
transition: none;
}
.speedvitals-facade:hover {
transform: none;
}
.speedvitals-play-btn:hover {
transform: none;
}
.speedvitals-facade.loading .speedvitals-play-btn {
animation: none;
}
} noscript iframe {
position: static;
width: 100%;
height: auto;
}