.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; overflow: hidden;
border-radius: 16px;
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none; cursor: pointer;
z-index: 2;
animation: pulse 2s infinite;
}
.play-button svg {
width: 68px;
height: 68px;
}
.sound-toggle {
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
}
.video-container:hover .sound-toggle {
opacity: 1;
}
.sound-toggle .sound-on,
.sound-toggle .sound-off {
position: absolute;
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.sound-toggle .sound-on.active,
.sound-toggle .sound-off.active {
display: flex;
}
.sound-toggle svg {
width: 24px;
height: 24px;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.1);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
} .wp-block-video-overlay {
position: relative;
}
@media (max-width: 768px) {
.play-button svg {
width: 48px;
height: 48px;
}
.sound-toggle {
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
}
.sound-toggle svg {
width: 18px;
height: 18px;
}
}