jQuery(function($){ // video widget let video = $('.video-video')[0]; if($('.video').length){ $(document).on('click', '.video[state=collapsed]', function(){ $('.video').addClass('active').attr('state', 'expanded'); $('.video-control').attr('mode', 'collapse'); video.muted = false; $('.video-btn').addClass('active'); }); $(document).on('click', '.video[state=expanded] .video-video', function(){ if(video.paused) video.play(); else video.pause(); }); $(document).on('click', '.video-control[mode=close]', function(){ $('.video').remove(); }); $(document).on('click', '.video-control[mode=collapse]', function(){ $('.video').removeClass('active').attr('state', 'collapsed'); $('.video-control').attr('mode', 'close'); video.muted = true; video.play(); $('.video-btn').removeClass('active'); }); $(document).click(function(event){ let $target = $(event.target); if(!$target.closest('.video[state=expanded]').length){ $('.video').removeClass('active').attr('state', 'collapsed'); $('.video-control').attr('mode', 'close'); video.muted = true; video.play(); $('.video-btn').removeClass('active'); } }); video.play(); video.ontimeupdate = function() { let progressPercents = Math.round(video.currentTime / video.duration * 100); $('.video-progress-bar').width(progressPercents + '%'); }; $('.video').show(); // setTimeout(function(){ // }, 500); } }); /*-------------------------------------------------------------- # Video Widget --------------------------------------------------------------*/ .video{ position: fixed; left: 0px; z-index: 1; bottom: 0px; padding: 0; margin: 0 !important; display: none; } .video-block{ z-index: 1; overflow: hidden; border-style: solid; background: rgb(238, 238, 238); transition: transform 0.2s ease-in-out 0s, width 0.3s ease-in-out 0s, height 0.3s ease-in-out 0s, bottom 0.3s ease-in-out 0s, border-color 0.2s ease-in-out 0s, opacity 1s ease-in-out 0s; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px; position: absolute; left: 50px; bottom: 50px; border-radius: 20px; border-width: 3px; width: 130px; height: 180px; border-color: rgb(255, 255, 255); } .video.active .video-block{ width: 280px; height: 500px; border-radius: 20px; border-color: rgb(19, 19, 68); } .video:not(.active):hover .video-block{ transform: scale(1.05) translate(5px, -5px); border-color: rgb(19, 19, 68); } .video-decor{ position: absolute; bottom: 0px; right: 0px; left: 0px; width: 100%; height: 40%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); box-sizing: border-box; z-index: 2; } .video-video{ object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 100%; min-height: 100%; z-index: 3; transition: opacity 0.4s ease-in-out 0s; opacity: 0.8; } .video-control{ position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; z-index: 5; opacity: 0; transition: transform 0.3s ease-in-out 0s, opacity 0.2s ease-in-out 0s; } .video-control[mode=collapse]{ opacity: 0.5; } .video:hover .video-control{ opacity: 0.5; } .video .video-control:hover{ opacity: 1; transform: scale(1.2); } .video-control::before, .video-control::after { position: absolute; left: 9px; top: 1px; content: " "; height: 18px; width: 2px; background: white; box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 10px; } .video-control::before { transform: rotate(45deg); } .video-control::after { transform: rotate(-45deg); } .video-control[mode=collapse]::after { transform: rotate(90deg); } .video-control[mode=collapse]::before{ display: none; } .video-btn{ position: absolute; left: 20px; bottom: 20px; width: calc(100% - 40px); z-index: 5; opacity: 0; visibility: hidden; transition: .2s ease-out; } .video-btn.active{ opacity: 1; visibility: visible; } .video-btn .btn{ min-width: 100%; } .video-progress{ position: absolute; bottom: 5px; left: 15px; width: calc(100% - 30px); height: 4px; background-color: #fff; border-radius: 2px; z-index: 5; opacity: 0.4; } .video-progress-bar{ position: absolute; width: 0; height: 4px; background-color: rgb(19, 19, 68); border-radius: 2px; } /*-------------------------------------------------------------- # Video Widget Media --------------------------------------------------------------*/ @media screen and (max-width:1190px){ .video-control{ opacity: 1; transform: scale(1.2); } } @media screen and (max-width:992px){ } @media screen and (max-width:768px){ } @media screen and (max-width:576px){ .video-block{ left: 20px; bottom: 20px; } }
Made on
Tilda