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

비디오 플레이어

마이크로 인터랙션, 보색 구성표, 중간 정도의 복잡성 및 반응형 디자인을 갖춘 비디오 플레이어 구성 요소(포트폴리오 사용을 위한 어두운 테마 지원).

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
  <div class="relative">
    <video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
      <button class="text-white text-4xl">
        ▶
      </button>
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
    </div>
  </div>
</div>

관련 구성 요소

비디오 플레이어 구성 요소

포트폴리오 전시를 위해 설계된 네오모픽 비디오 플레이어 구성 요소로, Tailwind CSS를 사용하여 어두운 테마와 반응형 디자인을 특징으로 합니다.

열다

비디오 플레이어 구성 요소

glassmorphism 스타일로 디자인된 반응형 비디오 플레이어 구성 요소로, 흐림 효과, 어두운 테마 지원 및 자리 표시자 이미지가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다.

열다

비디오 플레이어 구성 요소

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

열다