Composant de lecteur vidéo immobilier
Un composant de lecteur vidéo complexe et réactif pour les plateformes immobilières, doté d’une esthétique Material Design avec une palette de couleurs forêt/vert. Comprend le contrôle vidéo, les détails de la propriété et une liste de lecture, avec une prise en charge complète du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-7xl mx-auto my-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Main Video Player Section -->
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden relative pb-9/16 aspect-video">
<iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0" title="Property Showcase Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Overlay for play/pause/volume (simplified as this is complex for pure HTML/CSS) -->
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 rounded-lg">
<div class="flex justify-between items-center w-full text-white">
<div class="flex items-center space-x-4">
<button class="p-3 rounded-full bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
</button>
<span class="text-sm hidden sm:block">0:45 / 3:20</span>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 10v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1z"/>
</svg>
</button>
<button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 4.5c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-2 12.5H8V7h2v10zm4 0h-2V7h2v10zm4 0h-2V7h2v10z" />
</svg>
</button>
<button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 3C6.48 3 2 7.48 2 13s4.48 10 10 10 10-4.48 10-10S17.52 3 12 3zm-1 15H9v-8h2v8zm4 0h-2v-8h2v8zm-2-10h-2V3h2v5z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Property Details & Playlist Section -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col">
<!-- Property Details -->
<div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100">Luxurious Forest-View Retreat</h2>
<p class="text-emerald-700 dark:text-emerald-400 text-sm font-semibold mb-3">$1,250,000</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">123 Evergreen Lane, Pine Ridge, CA 90210</p>
<div class="flex items-center space-x-4 text-gray-600 dark:text-gray-400 text-sm ">
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5L5 9v11h14V9l-7-5.5zm0 2.31l5 4V19h-5v-6h-2v6H7V10.81l5-4z"/></svg>
4 Beds
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5c-2.49 0-4.5 2.01-4.5 4.5 0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5c0-2.49-2.01-4.5-4.5-4.5zM12 2c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 14c-4.42 0-8 3.58-8 8h16c0-4.42-3.58-8-8-8z"/></svg>
3 Baths
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M16 13l-4 4-4-4V7h8v6z"/></svg>
2,800 sqft
</span>
</div>
</div>
<!-- Agent Information (Optional, but good for real estate) -->
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Name" class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400 mr-4 shadow-sm">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Senior Real Estate Agent</p>
</div>
<button class="ml-auto bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2 px-4 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300">
Contact
</button>
</div>
<!-- Video Playlist -->
<div class="flex-grow overflow-y-auto custom-scrollbar pr-2">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">More Videos</h3>
<div class="space-y-4">
<!-- Playlist Item 1 -->
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
<img src="https://picsum.photos/120/80?random=1" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Interactive 3D Floor Plan Tour</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2:15 min</p>
</div>
<button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Playlist Item 2 (Currently Playing) -->
<div class="flex items-center p-3 bg-emerald-50 dark:bg-emerald-900 rounded-lg shadow-md border border-emerald-500 dark:border-emerald-400 relative overflow-hidden">
<span class="absolute top-0 right-0 bg-emerald-500 dark:bg-emerald-400 text-white text-xs px-2 py-1 rounded-bl-lg font-semibold">Playing</span>
<img src="https://picsum.photos/120/80?random=2" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-emerald-400 dark:border-emerald-300">
<div class="flex-grow">
<p class="font-semibold text-emerald-800 dark:text-emerald-100 line-clamp-2">Full Property Walkthrough (Current)</p>
<p class="text-xs text-emerald-600 dark:text-emerald-300">3:20 min</p>
</div>
<button class="ml-4 p-2 rounded-full text-emerald-700 dark:text-emerald-200 bg-emerald-100 dark:bg-emerald-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
</div>
<!-- Playlist Item 3 -->
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
<img src="https://picsum.photos/120/80?random=3" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Aerial Drone Footage of Estate</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1:50 min</p>
</div>
<button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
<!-- Playlist Item 4 -->
<div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
<img src="https://picsum.photos/120/80?random=4" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
<div class="flex-grow">
<p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Neighborhood & Community Highlights</p>
<p class="text-xs text-gray-500 dark:text-gray-400">4:00 min</p>
</div>
<button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Custom Scrollbar Styles (Pure CSS approximation, requires more robust JS for full functionality) -->
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f0fdf4; /* light emerald/green tone */
border-radius: 10px;
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: #374151; /* gray-700 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #059669; /* emerald-600 */
border-radius: 10px;
border: 2px solid #f0fdf4;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #34d399; /* emerald-400 */
border: 2px solid #374151;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #047857; /* emerald-700 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #10b981; /* emerald-500 */
}
/* Aspect ratio for video player */
.pb-9\/16 {
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
</style>
</div>Composants associés
Skeuomorphic_Farm_Video_Player
Un composant de lecteur vidéo skeuomorphe conçu pour les sites Web agricoles et agricoles, avec du noir et blanc avec une couleur d’accent vive, une mise en page réactive et la prise en charge du mode sombre.
Composant du lecteur vidéo
Un composant de lecteur vidéo de style Brutalism avec un contraste élevé et une mise en page inhabituelle, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant du lecteur vidéo
Un composant de lecteur vidéo néomorphique conçu pour la présentation de portfolios, avec un thème sombre et un design réactif à l’aide de Tailwind CSS.