Video Player Component
A Glassmorphism-styled video player with frosted glass-like translucent elements, pastel color scheme, and a complex interface suitable for business/corporate websites. It supports responsive design and a dark theme using Tailwind CSS, with no JavaScript.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="relative w-full max-w-4xl bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
<!-- Video Player Header -->
<div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-b border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Corporate Presentation</h2>
<div class="flex space-x-2">
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<!-- Main Video Area -->
<div class="aspect-w-16 aspect-h-9 w-full bg-black relative">
<img src="https://picsum.photos/seed/picsum/1280/720" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60">
<button class="p-4 rounded-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 text-gray-800 dark:text-white hover:scale-110 transition-transform transform shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<!-- Video Controls -->
<div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-t border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between flex-wrap">
<div class="flex items-center space-x-4 mb-2 sm:mb-0 w-full sm:w-auto">
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</button>
<span class="text-gray-800 dark:text-white text-sm">0:00 / 5:30</span>
</div>
<div class="flex-grow mx-4 mb-2 sm:mb-0">
<div class="h-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50">
<div class="h-full w-1/3 bg-pink-300 dark:bg-pink-400 rounded-full"></div>
</div>
</div>
<div class="flex items-center space-x-2 w-full sm:w-auto justify-end">
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors hidden sm:block">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 5a2 2 0 11-4 0 2 2 0 014 0zM10 3a1 1 0 100 2 1 1 0 000-2zm0 13a1 1 0 100 2 1 1 0 000-2z" />
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM5.5 8.5C5.224 8.5 5 8.276 5 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5zM14.5 8.5C14.224 8.5 14 8.276 14 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm1.48 8.163a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<!-- Related Videos / Playlist (Example) -->
<div class="p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-md rounded-b-2xl border-t border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 hidden md:block">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Next Up</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Related Video Item -->
<div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
<img src="https://picsum.photos/seed/related1/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white">Future of Business AI</p>
<p class="text-xs text-gray-600 dark:text-gray-300">John Doe • 12K views</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
<img src="https://picsum.photos/seed/related2/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white">Marketing Strategies 2024</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Jane Smith • 8K views</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
<img src="https://picsum.photos/seed/related3/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-white">Team Collaboration Tools</p>
<p class="text-xs text-gray-600 dark:text-gray-300">Mike Johnson • 5K views</p>
</div>
</div>
</div>
</div>
</div>
</div>
Related Components
Retro Video Player Component
An interactive video player component designed with a retro/vintage aesthetic, featuring a grayscale color scheme and multiple interactive elements suitable for e-commerce purposes, with dark mode support.
Video Player Component
A simple video player component designed with a 3D style and pastel color scheme, suitable for dashboards.
Video Player Component
A retro/vintage styled video player component featuring responsive design and dark mode support using Tailwind CSS.