구성 요소 비디오 플레이어 비디오 플레이어 구성 요소

비디오 플레이어 구성 요소

소셜 미디어 인터페이스용으로 설계된 미니멀한 비디오 플레이어 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.

미리 보기

HTML 코드

<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <video class="w-full h-64" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="ml-3">
                <h2 class="text-white text-lg font-semibold">User Name</h2>
                <p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
            </div>
        </div>
        <div class="mt-2">
            <p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
        </div>
        <div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
            <button class="hover:text-white focus:outline-none">Like</button>
            <button class="hover:text-white focus:outline-none">Share</button>
            <button class="hover:text-white focus:outline-none">Comment</button>
        </div>
    </div>
</div>

관련 구성 요소

비디오 플레이어 구성 요소

블로그 또는 콘텐츠 소비를 위해 설계된 반응형 비디오 플레이어 구성 요소로, 마이크로 인터랙션과 파스텔 색상 구성표를 사용합니다. 여기에는 재생/일시 중지 기능과 볼륨 컨트롤이 포함됩니다. 이 디자인에는 다크 모드 지원도 포함됩니다.

열다

비디오 플레이어 구성 요소

Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원하는 레트로/빈티지 스타일의 비디오 플레이어 구성 요소입니다.

열다

비디오 플레이어 구성 요소

고대비와 특이한 레이아웃을 갖춘 Brutalism 스타일의 비디오 플레이어 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다