组件 视频播放器 视频播放器组件

视频播放器组件

一个简单的视频播放器组件,采用 3D 样式和柔和的配色方案设计,适用于仪表板。

预览

HTML 代码

<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>

相关组件

极简视频播放器

使用HTML和Tailwind CSS编码的视频播放器组件。它具有极简设计,采用灰度色彩方案,旨在用于仪表板。它是一个复杂的组件,具有多个交互元素,并且完全响应,支持暗黑模式。

打开

视频播放器组件

一个具有响应式设计和深色模式支持的复古/经典风格视频播放器组件,使用 Tailwind CSS。

打开

视频播放器组件

一个采用玻璃形态设计的视频播放器组件,具有类似磨砂玻璃的效果和互补色。它是互动的,并且响应式,适合带有深色主题支持的博客内容。

打开