theme-video-media { position: relative; display: block; width: 100%; } .theme-video-media video, .theme-video-media iframe { display: block; width: 100%; height: 100%; border: none; outline: none; } .theme-video-media__poster { position: relative; inset-block-start: 0; inset-inline-start: 0; z-index: 1; width: 100%; height: 100%; } .theme-video-media__poster img, .theme-video-media__poster svg { z-index: 2; display: block; width: 100%; height: 100%; object-fit: var(--poster-image-fit-type); } .theme-video-media__play-button { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: 3; display: flex; width: 15%; min-width: 36px; max-width: 88px; aspect-ratio: 1; padding: 0; cursor: pointer; background: none; border: none; outline: none; transition: transform 0.2s; transform: translate(-50%, -50%); } .theme-video-media__play-button:hover { transform: translate(-50%, -50%) scale(1.11); } .theme-video-media__play-button-icon { z-index: 3; width: 100%; height: 100%; color: rgb(var(--color-text)); } .theme-video-media__play-button-icon circle { fill: rgb(var(--color-background)); } .theme-video-media__media { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 0; width: 100%; max-width: 100%; height: 100%; background-color: rgba(var(--color-image-background)); } .theme-video-media__media.active { z-index: 2; } .theme-video-media--empty { width: 100%; height: 848px; } @media (max-width: 959px) { .theme-video-media--empty { height: 188px; } }