.youtube-facade{position:relative;width:100%;height:0;padding-bottom:56.25%;background:#000;cursor:pointer;border-radius:8px;overflow:hidden;transition:transform .2s ease}.youtube-facade.portrait{padding-bottom:177.78%;max-width:400px;margin:0 auto}.youtube-facade.square{padding-bottom:100%}.youtube-facade:hover{transform:scale(1.02)}.youtube-facade-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.youtube-facade:hover .youtube-facade-thumbnail{opacity:.8}.youtube-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:rgba(255,0,0,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 20px rgba(0,0,0,.3)}.youtube-facade:hover .youtube-facade-play{background:red;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 6px 25px rgba(0,0,0,.4)}.youtube-facade-play::before{content:'';width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:4px}.youtube-facade-title{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;padding:40px 20px 20px;font-size:16px;font-weight:500;line-height:1.4}.youtube-facade-duration{position:absolute;bottom:20px;right:20px;background:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.youtube-facade-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;display:none}.youtube-facade.loading .youtube-facade-play{display:none}.youtube-facade.loading .youtube-facade-loading{display:block}.youtube-facade-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:8px}@media (max-width:768px){.youtube-facade-play{width:60px;height:60px}.youtube-facade-play::before{border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}.youtube-facade-title{font-size:14px;padding:30px 15px 15px}.youtube-facade.portrait{max-width:280px}}@media (max-width:480px){.youtube-facade.portrait{max-width:250px}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.youtube-facade-iframe{animation:fadeIn .3s ease}