Video Player Component
A simple video player component designed with a 3D style and pastel color scheme, suitable for dashboards.
HTML Code
<div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex flex-col items-start mt-4 w-full">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
<div class="flex items-center mt-2">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
<span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
</div>
</div>
</div>Related Components
Video Player Component - Watercolor/Artistic, Ocean/Blue, Healthcare
A simple, responsive video player component with a watercolor/artistic design style and ocean/blue color scheme, suitable for healthcare and medical applications. Includes dark mode support.
Video Player Component
Responsive video player component with Glassmorphism design, Earth tones color scheme, and dark mode support. Uses simple HTML and Tailwind CSS.
Skeuomorphic_Farm_Video_Player
A skeuomorphic video player component designed for agricultural and farming websites, featuring black and white with a bright accent color, responsive layout, and dark mode support.