CCHub Logo CCHub Tailwind Collection
구성 요소 비디오 플레이어 비디오 플레이어 구성 요소

비디오 플레이어 구성 요소

머티리얼 디자인 원칙을 사용하여 설계된 간단한 동영상 플레이어 구성 요소로, 반응형 레이아웃과 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
    <div class="relative overflow-hidden">
        <video class="w-full h-auto" controls>
            <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="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <div>
                <p class="text-gray-800 dark:text-white">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

비디오 플레이어 구성 요소

젖빛 유리와 같은 반투명 요소, 파스텔 색 구성표 및 비즈니스/기업 웹사이트에 적합한 복잡한 인터페이스를 갖춘 Glassmorphism 스타일의 비디오 플레이어입니다. JavaScript 없이 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

비디오 플레이어 구성 요소

Glassmorphism 디자인, Earth tones 색 구성표 및 다크 모드를 지원하는 반응형 비디오 플레이어 구성 요소입니다. 간단한 HTML 및 Tailwind CSS를 사용합니다.

열다

레트로 다크 모드 비디오 플레이어 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 반응형 비디오 플레이어 구성 요소로, 레트로 음소거 색상 팔레트와 완전한 다크 모드를 지원합니다. 여기에는 자리 표시자 비디오와 타임라인이 있는 컨트롤이 포함됩니다.

열다