fix: add JavaScript function to force image scaling override CSS conflicts

This commit is contained in:
Ching L 2025-12-04 01:18:57 +08:00
parent 3d1f189293
commit 9c5accc503

View File

@ -97,26 +97,37 @@
height: 50px !important;
overflow: hidden;
}
.plyr__preview-thumb__image-container img,
div.plyr__preview-thumb__image-container img {
width: 89px !important;
height: 50px !important;
object-fit: cover !important;
min-width: unset !important;
min-height: unset !important;
transform: none !important;
left: 0 !important;
top: 0 !important;
.plyr__preview-thumb__image-container img {
transform: scale(0.35) !important;
transform-origin: top left !important;
}
`;
document.head.appendChild(style);
console.log('Custom styles added for preview thumb image container');
}
// Function to continuously update image scale to ensure it takes effect
function updateImageScale() {
const images = document.querySelectorAll('.plyr__preview-thumb__image-container img');
images.forEach(img => {
if (!img.style.transform || !img.style.transform.includes('scale(0.35)')) {
img.style.setProperty('transform', 'scale(0.35)', 'important');
img.style.setProperty('transform-origin', 'top left', 'important');
}
});
}
// Run the sort function after the DOM content has loaded
window.addEventListener('load', function() {
addCustomStyles();
addSortButton();
sortAllVideos();
// Periodically update image scale to ensure it takes effect
setInterval(updateImageScale, 1000);
// Also update immediately
setTimeout(updateImageScale, 100);
setTimeout(updateImageScale, 500);
})
})();