body, main { overflow-x: hidden; } /*noinspection CssOverwrittenProperties*/ .king-addons-video-popup { position: fixed; overflow: auto; transition: all 500ms ease; width: 100%; max-width: 100%; max-height: 100vh; /* Safari fix */ max-height: 100svh; max-width: 965px; } /* Hide scrollbar */ .king-addons-video-popup::-webkit-scrollbar { display: none; } .king-addons-video-popup-overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; transition: opacity 500ms ease; opacity: 0; } .king-addons-video-popup-animation-fade { opacity: 0; } .king-addons-video-popup-animation-fade.king-addons-video-popup-active { opacity: 1; } .king-addons-video-popup-position-top { top: -100%; left: 50%; transform: translateX(-50%); transition: top 500ms ease, transform 500ms ease; } .king-addons-video-popup-position-right { top: 50%; right: -100%; transform: translateY(-50%); transition: right 500ms ease, transform 500ms ease; } .king-addons-video-popup-position-bottom { bottom: -100%; left: 50%; transform: translateX(-50%); transition: bottom 500ms ease, transform 500ms ease; } .king-addons-video-popup-position-left { top: 50%; left: -100%; transform: translateY(-50%); transition: left 500ms ease, transform 500ms ease; } .king-addons-video-popup-position-top.king-addons-video-popup-animation-slide.king-addons-video-popup-active { top: 50%; transform: translate(-50%, -50%); } .king-addons-video-popup-position-right.king-addons-video-popup-animation-slide.king-addons-video-popup-active { right: 50%; transform: translate(50%, -50%); } .king-addons-video-popup-position-bottom.king-addons-video-popup-animation-slide.king-addons-video-popup-active { bottom: 50%; transform: translate(-50%, 50%); } .king-addons-video-popup-position-left.king-addons-video-popup-animation-slide.king-addons-video-popup-active { left: 50%; transform: translate(-50%, -50%); } /* Video */ .king-addons-video-popup-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */ height: 0; overflow: hidden; } .king-addons-video-popup-container iframe, .king-addons-video-popup-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: contain; } /* Button */ .king-addons-video-popup-button { display: inline-flex; position: relative; transition: all .3s; } .king-addons-video-popup-button-effect-ripple:before { content: ''; display: inline-block; position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; border-radius: inherit; border: 1px solid #000000; animation: king-addons-video-popup-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite; } @keyframes king-addons-video-popup-ripple { 0% { border-width: 4px; transform: scale(1); } 80% { border-width: 1px; transform: scale(1.35); } 100% { opacity: 0; } } .king-addons-video-popup-button-wrap { display: inline-flex; }