AI Video Admaker
Pour une promotion vidéo gagnante

#create-ugc-slider-banner-container-mobile { width: 100%; overflow: hidden; white-space: nowrap; position: relative; margin: 0; padding: 50px 0; } .create-ugc-slider-banner-item-mobile { position: relative; cursor: pointer; display: inline-block; margin: 0 20px; transition: transform 0.3s ease-in-out; } .create-ugc-hover-video-container-mobile { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; transition: all 0.3s; z-index: 1; } .create-ugc-hover-video-container-mobile video { pointer-events: none; width: 100%; height:100%; object-fit: cover; display: block; z-index: 0; } .create-ugc-name-label-mobile { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 1); padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: bold; color: #6366F1; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 10; } .create-ugc-slider-banner-item-mobile.active { /*transform: scale(1.2);*/ } .create-ugc-slider-banner-item-mobile.active .create-ugc-hover-video-container-mobile { border-radius: 8px; } .create-ugc-slider-banner-item-mobile.active .create-ugc-name-label-mobile { opacity: 1; } document.addEventListener('DOMContentLoaded', () => { const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth { const sliderItem = document.createElement('div'); sliderItem.className = 'create-ugc-slider-banner-item-mobile'; sliderItem.innerHTML = ` `; sliderBannerContainer.appendChild(sliderItem); const video = sliderItem.querySelector('video'); const label = sliderItem.querySelector('.create-ugc-name-label-mobile'); if (isMobile) { video.autoplay = false; video.pause(); } sliderItem.addEventListener('click', () => { // Remove active from all items first document.querySelectorAll('.create-ugc-slider-banner-item-mobile').forEach(item => { item.classList.remove('active'); const vid = item.querySelector('video'); if (vid) vid.pause(); }); sliderItem.classList.add('active'); video.play(); }); }); // Initialize marquee $('#create-ugc-slider-banner-container-mobile').marquee({ duration: 20000, gap: 15, duplicated: true, startVisible: true, delayBeforeStart: 0, }); });