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

视频播放器组件

一个专为作品集展示而设计的新形态视频播放器组件,具有深色主题和使用 Tailwind CSS 的响应式设计。

预览

HTML 代码

<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="bg-gray-300 dark:bg-gray-800 w-full md:w-3/4 rounded-xl overflow-hidden shadow-inner">
        <video controls class="w-full h-auto">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="mt-4 text-center">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Showcase Title</h2>
        <p class="text-gray-600 dark:text-gray-400">A short description of the video content goes here. Highlight your work effectively.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-inner">
        <div class="ml-3">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">User Name</span>
        </div>
    </div>
</div>

相关组件

视频播放器组件

适用于电子商务的极简/扁平化设计视频播放器组件,响应式设计,支持暗主题。

打开

视频播放器组件

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

打开

视频播放器组件

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

打开