Best Seller
/* ICON VIDEO */
.video-icon{
position:absolute;
bottom:14px;
right:14px;
width:48px;
height:48px;
background:rgba(0,0,0,.7);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
cursor:pointer;
z-index:5;
animation: blinkSoft 1.6s infinite;
}
/* ANIMASI KEDIP LEMBUT */
@keyframes blinkSoft{
0%{
opacity:1;
transform:scale(1);
}
50%{
opacity:.65;
transform:scale(1.05);
}
100%{
opacity:1;
transform:scale(1);
}
}
/* OVERLAY FULLSCREEN */
.video-overlay{
position:fixed;
inset:0;
background:#000;
display:none;
z-index:99999;
}
/* WRAPPER VIDEO */
.video-wrapper{
position:relative;
width:100vw;
height:100vh;
}
/* IFRAME FULL */
.video-wrapper iframe{
width:100%;
height:100%;
border:0;
}
/* TOMBOL X */
.video-close{
position:absolute;
top:16px;
right:16px;
width:42px;
height:42px;
background:rgba(0,0,0,.6);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
cursor:pointer;
z-index:10;
}
function openVideo(){
const overlay = document.getElementById("videoOverlay");
const frame = document.getElementById("videoFrame");
frame.src = "https://www.youtube.com/embed/9KMW-qDzgiE?autoplay=1&playsinline=1";
overlay.style.display = "block";
}
function closeVideo(){
const overlay = document.getElementById("videoOverlay");
const frame = document.getElementById("videoFrame");
overlay.style.display = "none";
frame.src = "";
}
