html { scroll-padding-top: 100px; } .responsive-video-wrapper { position: relative; width: 100%; max-width: 100%; height: auto; } .responsive-video-iframe { border: 1px solid #d9d9d9; border-radius: 10px; } .responsive-video-iframe, .youtube-placeholder { width: 100%; height: 450px; } .youtube-placeholder { position: relative; cursor: pointer; display: inline-block; } .youtube-placeholder img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #d9d9d9; border-radius: 10px; } .youtube-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .youtube-play-button i { font-size: 42px; color: #ffffff; text-shadow: 0 0 15px rgba(47, 47, 47, 0.5); transition: color 0.3s ease; } .youtube-play-button:hover i { color: #e8e8e8; } @media only screen and (max-width: 768px) { .responsive-video-iframe, .youtube-placeholder { height: 200px; } }