.video-loader { z-index: 1; position: absolute; top: 42%; left: 46%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 3.8px solid #47a3ff; animation: spinner-bulqg1 1.1199999999999999s infinite linear alternate, spinner-oaa3wk 2.2399999999999998s infinite linear; } @keyframes spinner-bulqg1 { 0% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); } 12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); } 25% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); } 50% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); } 62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); } 75% { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); } 100% { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); } } @keyframes spinner-oaa3wk { 0% { transform: scaleY(1) rotate(0deg); } 49.99% { transform: scaleY(1) rotate(135deg); } 50% { transform: scaleY(-1) rotate(0deg); } 100% { transform: scaleY(-1) rotate(-135deg); } } .video-container video, .imgpost{ position: relative; width: 100%; height: auto; border-radius: 20px; } .progress-bar-container { position: relative; width: 100%; height: 4px; background-color: #A0A0A0; cursor: pointer; border-radius: 20px; transition: all .3s ease-out; } .progress-bar-loaded { pointer-events: none; position: absolute; top: 0; left: 0; height: 4px; /* Set the height to match the progress-bar-container height */ background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; } .progress-bar-container:hover{ } @media (max-width: 1080px) { .progress-bar-container { height: 6px !important; } .progress-bar-loaded { height: 6px !important; } } .progress-bar { position: relative; padding-top: 8px; padding-bottom: 8px; width: 100%; height: 100%; } .progress-bar-container:hover .progress-bar-fill::after { display: block; } .progress-bar-fill { bottom : 8px; border-radius: 20px; height: 4px; background-color: #5BAAFF; width: 0; position: relative; pointer-events: none; } .progress-bar-fill::after { content: ''; display: none; position: absolute; top: 50%; right: -1px; /* Adjust the position of the circle */ transform: translate(50%, -50%); width: 12px; height: 12px; background-color: #fff; border-radius: 50%; } .video-controls .play_button{ z-index: 1; font-size: 20px; background: transparent; border: none; left: 25px; cursor: pointer; color: white; border-radius: 50%; position: relative; } .play_button:focus { outline: none; box-shadow: 0 0 0 2px transparent; /* Replace with your desired focus styles */ } .tooltip-video-play-pause { position: absolute; top: -170%; left: 100%; transform: translateX(-50%); opacity: 0; visibility: hidden; background-color: #cfcfcfea; color: #000000d2; font-weight: 300; padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: Arial; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .play_button:hover .tooltip-video-play-pause { visibility: visible; opacity: 1; } .rewatch-text { cursor: pointer; white-space: nowrap; background-color: #cfcfcfea; color: #000000d2; border-radius: 4px; font-size: 13px; font-weight: 600; font-family: Arial; padding: 5px 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } .tooltip-progress-bar { position: absolute; bottom: 35px; left: calc(var(--cursor-x) - 50%); background-color: #000000ea; margin-left: -7px; color: #ffffffd2; font-size: .74rem; font-weight: 100; font-family: Arial; padding: 3px 4px; border-radius: 4px; font-size: 12px; white-space: nowrap; display: none; } .tooltip-fullscreen { white-space: nowrap; position: absolute; top: -200%; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; background-color: #cfcfcfea; color: #000000d2; font-weight: lighter; padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: Arial; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .fullscreen-button:hover .tooltip-fullscreen { visibility: visible; opacity: 1; } .fullscreen-button .tooltip-fullscreen { transition-delay: 0.1s; /* Delay the transition when hiding the tooltip */ } .fullscreen-button:not(:hover) .tooltip-fullscreen { transition-delay: 0s; /* Remove the transition delay when showing the tooltip */ visibility: hidden; opacity: 0; } .video-controls .fullscreen-button{ position: absolute; font-size: 15px; cursor: pointer; color: white; border: none; background: transparent; right: 47px; } .video-controls .time-indicator{ position: absolute; font-size: .75rem; font-family: arial; cursor: text; margin-left: 10%; top: 50%; z-index: 3; } .video-controls.fullscreen{ left: 1.5%; bottom: 3%; } .volume-slider-container { display: none; } @media (min-width: 1080px) { .volume-container:hover .volume-slider-container { display: block; } } .video-container{ position: relative; width: auto; height: fit-content; cursor: none; color: #fff; }.video-container.fullscreen{ display: flex; align-items: center; justify-content: center; } .overlay-video { display: block; z-index: 1; border-radius: 21px; border-bottom-left-radius: 21px; border-bottom-right-radius: 21px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; background: linear-gradient(rgb(0 0 0 / 43%) 5%, transparent 40%, rgb(0 0 0 / 60%) 90%); transition: all .2s ease-out; } .overlay-video.hidden { opacity: 0; pointer-events: none; cursor: none; } .video-controls { cursor: pointer; z-index: 1; padding: 0 10px 0px 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: 0px; bottom: 4%; position: absolute; justify-content: center; align-items: center; margin-right: auto; width: 100%; opacity: 1; pointer-events: auto; /* Enable pointer events when visible */ transition: opacity 0.1s ease-out, transform 0.3s ease-out; /* Add transform to the transition */ transform: translateY(0); } .video-controls.hidden { opacity: 0; pointer-events: none; transform: translateY(11px); overflow: hidden; cursor: none; } .progress-bar-container, .play_button, .volume-container { display: inline-block; vertical-align: middle; } .volume-container { position: absolute; top: 20px; right: 0; display: flex; /* Add display flex to make the elements inside the volume container align horizontally */ align-items: center; /* Center align the elements vertically */ padding-right: 20px; /* Adjust the padding as needed */ } .volume-icon i { transition: transform 0.3s ease; } .volume-slider-container { padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 2px; max-width: 100px; position: absolute; top: -46px; right: -10px; z-index: 5; border-radius: 50px; transform: rotateZ(-90deg); background: #00000052; } .volume-slider { -webkit-appearance: none; appearance: none; width: 50px; height: 7px; border-radius: 50px; position: relative; background-color: #fff0; } .volume-slider::-webkit-slider-runnable-track { border-radius: 20px; height: 7px; background-color: #cccB; } .volume-slider::-moz-range-track { height: 7px; background-color: #ccc; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; top: -2px; left: -.5px; width: 12px; height: 12px; border-radius: 50%; background-color: #fcfcfc; cursor: pointer; position: relative; z-index: 2; /* Ensure the thumb is above the fill */ } .volume-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; position: relative; z-index: 2; /* Ensure the thumb is above the fill */ } .volume-slider-fill { border-radius: 2px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; position: absolute; top: 11px; left: 10px; height: 7px; background-color: #409DFF; z-index: 1; pointer-events: none; } .volume-img{ width: 20px; position: relative; top: -2px; right: -2px; } .tooltip-volume { white-space: nowrap; position: absolute; top: -100px; /* Adjust this value as needed */ left: -90%; transform: translateX(-50%); opacity: 0; visibility: hidden; background-color: #cfcfcfea; color: #000000d2; font-weight: 300; padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: Arial; transition: opacity 0.3s ease-in-out; font-family: Arial, sans-serif; /* Replace with your desired font */ } .volume-container:hover .tooltip-volume { visibility: visible; opacity: 1; } /* Tooltip */ .captions-container { position: relative; } .captions-container::before { content: attr(aria-label); white-space: nowrap; position: relative; top: -220%; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; background-color: #cfcfcfea; color: #000000d2; font-weight: lighter; padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: Arial; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; pointer-events: none; } .captions-container:hover::before { visibility: visible; opacity: 1; } .captions-container .caption-btn{ background: transparent; position: absolute; border: none; color: #fff; cursor: pointer; top: 0; } .captions-container{ display: flex; position: absolute; cursor: pointer; right: 106px; margin-top: -26px; width: 28px; height: 15px; align-items: center; justify-content: center; } .track-captions { color: yellow !important; font-size: 16px; font-family: Arial, sans-serif; background-color: rgba(0, 0, 0, 0.8); padding: 5px 10px; border-radius: 5px; text-align: center; display: none; } .captions-container.active + video .track-captions { display: block; } video.postvideo.slide.fullscreen, .overlay-video.fullscreen { border-radius: 0px; } video::cue { position: relative; color: #CDCDCD; font-weight: normal; margin-bottom: 10px; font-family: Arial, sans-serif; background-color: rgba(0, 0, 0, 0.8); padding: 5px 10px; border-radius: 5px; text-align: center; line-height: 100px; } .settings-container{ bottom: 10%; right: 75px; position: absolute; } .settings-button{ color: white; cursor: pointer; border: none; border-radius: 100px; background: transparent; } .tooltip-settings { white-space: nowrap; position: absolute; top: -220%; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; background-color: #cfcfcfea; color: #000000d2; font-weight: lighter; padding: 5px 10px; border-radius: 4px; font-size: 13px; font-family: Arial; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } .settings-button:hover .tooltip-settings { visibility: visible; opacity: 1; transition-delay: 0.1s; /* Delay the transition to ensure smoothness */ } .playback-speed-list { text-align: left; width: 147px; display: none; /* Initially hide the playback speed list */ position: absolute; bottom: 100%; right: -65px; background-color: #353535; border-radius: 20px; padding: 5px; list-style-type: none; z-index: 2; box-shadow: 0 0 10px rgb(255 255 255 / 40%); } .playback-speed-list a{ color: #fff; } .playback-speed-list.show { display: block; /* Show the playback speed list when the 'show' class is added */ } .playback-speed-list li { position: relative; cursor: pointer; align-items: center; /* Add this line to vertically align the items */ padding: 5px; } .playback-speed-list li:hover { background-color: #3F3F3F; color: #fff; border-radius: 10px; } .playback-speed-list .title1{ padding: 10px; display: block; width: fit-content; margin-left: auto; margin-right: auto; } .checkmark { display: none; width: 12px; height: 12px; border-radius: 50%; color: #fff; font-size: 15px; top: 23px; } .selected .checkmark { display: inline-flex; position: absolute; margin-left: 5px; /* Add this line to create spacing between the checkmark and the speed label */ margin-top: -18px; right: 17px; z-index: 4; }