ビデオプレーヤー

ビデオプレーヤーコンポーネント

曇りガラスのような半透明の要素、パステルカラーの配色、ビジネス/企業のWebサイトに適した複雑なインターフェイスを備えたGlassmorphismスタイルのビデオプレーヤー。レスポンシブデザインと、JavaScriptなしでTailwind CSSを使用したダークテーマをサポートしています。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="relative w-full max-w-4xl bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <!-- Video Player Header -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-b border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Corporate Presentation</h2>
      <div class="flex space-x-2">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Video Area -->
    <div class="aspect-w-16 aspect-h-9 w-full bg-black relative">
      <img src="https://picsum.photos/seed/picsum/1280/720" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60">
        <button class="p-4 rounded-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 text-gray-800 dark:text-white hover:scale-110 transition-transform transform shadow-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Video Controls -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-t border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between flex-wrap">
      <div class="flex items-center space-x-4 mb-2 sm:mb-0 w-full sm:w-auto">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <span class="text-gray-800 dark:text-white text-sm">0:00 / 5:30</span>
      </div>
      <div class="flex-grow mx-4 mb-2 sm:mb-0">
        <div class="h-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50">
          <div class="h-full w-1/3 bg-pink-300 dark:bg-pink-400 rounded-full"></div>
        </div>
      </div>
      <div class="flex items-center space-x-2 w-full sm:w-auto justify-end">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors hidden sm:block">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 5a2 2 0 11-4 0 2 2 0 014 0zM10 3a1 1 0 100 2 1 1 0 000-2zm0 13a1 1 0 100 2 1 1 0 000-2z" />
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM5.5 8.5C5.224 8.5 5 8.276 5 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5zM14.5 8.5C14.224 8.5 14 8.276 14 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm1.48 8.163a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Related Videos / Playlist (Example) -->
    <div class="p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-md rounded-b-2xl border-t border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 hidden md:block">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Next Up</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Related Video Item -->
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related1/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Future of Business AI</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">John Doe • 12K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related2/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Marketing Strategies 2024</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Jane Smith • 8K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related3/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Team Collaboration Tools</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Mike Johnson • 5K views</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ビデオプレーヤーコンポーネント

Glassmorphismデザイン、アースカラーの配色、およびダークモードのサポートを備えたレスポンシブビデオプレーヤーコンポーネント。シンプルなHTMLとTailwind CSSを使用します。

プレビューを開く

                <div class="relative flex items-center justify-center w-full h-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl">
  <div class="absolute inset-0 bg-black bg-opacity-10 backdrop-filter backdrop-blur-lg"></div>
  <video controls class="relative z-10 w-full max-h-96 rounded-lg" poster="https://picsum.photos/seed/picsum/800/600">
    <source src="your_video_source.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-20 backdrop-filter backdrop-blur-lg z-10">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <button class="text-white hover:text-gray-300 focus:outline-none mr-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V6.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <div class="text-sm text-white">0:00 / 0:00</div>
      </div>
      <div class="flex items-center">
        <button class="text-white hover:text-gray-300 focus:outline-none mr-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-2.829a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0m-2.828 2.828a5 5 0 01-7.072 0m7.072 7.072a5 5 0 010-7.072m-2.828 2.828a9 9 0 01-12.728 0m-.001 0a9.997 9.997 0 00-1.912 2.483m1.398 3.463c.374.271.797.448 1.265.526M12 8C8.134 8 5 11.134 5 15s3.134 7 7 7c1.73 0 3.36-.423 4.792-1.166M12 17.25a.25.25 0 00-.25.25v.25c0 .138.112.25.25.25h.01a.25.25 0 00.25-.25v-.25a.25.25 0 00-.25-.25h-.01z" />
          </svg>
        </button>
        <button class="text-white hover:text-gray-300 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

ビデオプレーヤーコンポーネント

Glassmorphismスタイル、類似の配色、およびブログ/コンテンツの目的のための適度な複雑さを備えたビデオプレーヤーコンポーネント、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポート。Javascriptはありません。

プレビューを開く

                <div class="dark:bg-gray-900 dark:text-white py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden lg:flex lg:max-w-6xl mx-auto">
      <div class="lg:w-1/2">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
      </div>
      <div class="lg:w-1/2 p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4 flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on May 15, 2023</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Example of Glassmorphism effect on a separate element -->
    <div class="mt-12 max-w-4xl mx-auto backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-700 rounded-lg p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Effect Example</h3>
      <p class="text-gray-700 dark:text-gray-200">This is an example of a frosted glass-like element with a blur effect, demonstrating the Glassmorphism style.</p>
    </div>

  </div>
</div>

3Dモノクロビデオプレーヤー

ダッシュボードに適した、3Dデザイン要素と単色の配色を備えたレスポンシブビデオプレーヤーコンポーネント。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">  <div class="relative w-full max-w-2xl rounded-lg shadow-xl overflow-hidden dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-500 hover:scale-105">    <div class="aspect-w-16 aspect-h-9">      <video controls class="w-full h-full object-cover">        <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-6">      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Video Title</h3>      <p class="text-gray-600 dark:text-gray-300">A brief description of the video content goes here. This is a sample video demonstrating the video player component with a 3D-like feel and monochromatic colors.</p>    </div>    <div class="absolute inset-0 pointer-events-none">      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-transparent to-gray-300 opacity-20 dark:from-gray-700 dark:to-gray-800 rounded-lg"></div>    </div>  </div></div>

ビデオプレーヤーコンポーネント

ポートフォリオの展示用に設計されたネオモーフィックビデオプレーヤーコンポーネントで、ダークテーマとTailwind CSSを使用したレスポンシブデザインが特徴です。

プレビューを開く

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

ビデオプレーヤーコンポーネント

ダッシュボードに適した、3Dスタイルとパステルカラーの配色でデザインされたシンプルなビデオプレーヤーコンポーネント。

プレビューを開く

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

ビデオプレーヤーコンポーネント

ダークモードのマテリアルデザインビデオプレーヤーコンポーネント

プレビューを開く

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="relative pb-9/16">
      <iframe class="absolute w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Video Title</h3>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on October 26, 2023</p>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex space-x-4">
          <button class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H12v-7H4v-7H3a2 2 0 01-2-2V5a2 2 0 012-2h1a2 2 0 012 2v2h0a2 2 0 002 2v1h2a2 2 0 002-2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
          <button class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.618 2H12v7h8v7h1a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-2h0a2 2 0 00-2-2v-1h-2a2 2 0 00-2 2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
        </div>
        <button class="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h9.634c.399 0 .701.232.8.519l7.273 17.209c.1.287-.08.609-.407.609H18.54l-5.007-12.623z"></path></svg>
        </button>
      </div>
    </div>
  </div>
</div>

ビデオプレーヤーコンポーネント

ダークモードのレスポンシブビデオプレーヤーコンポーネント

プレビューを開く

                <div class="aspect-w-16 aspect-h-9 bg-gray-900 dark:bg-gray-800 rounded-lg overflow-hidden">
  <video controls class="w-full h-full object-cover">
    <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="bg-gray-900 text-gray-300 p-4 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative aspect-w-16 aspect-h-9">
        <video class="rounded-lg" controls>
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="mt-4">
        <h2 class="text-lg font-semibold">Video Title</h2>
        <p class="text-sm">This is a short description of the video content. It provides context and encourages the viewer to watch the video.</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 mr-2">
        <div>
            <h3 class="text-md font-semibold">Username</h3>
            <p class="text-xs text-gray-500">Posted on <time datetime="2023-10-01">October 1, 2023</time></p>
        </div>
    </div>
</div>

ミニマリストビデオプレーヤー

Tailwind CSSを使用してHTMLでコード化されたビデオプレーヤーコンポーネント。ダッシュボードでの使用を目的とした、グレースケールの配色を使用したミニマリストデザインです。これは、複数のインタラクティブ要素を持つ複雑なコンポーネントであり、ダークモードのサポートにより完全にレスポンシブです。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Video Area -->
    <div class="relative" style="padding-top: 56.25%;">
      <video controls class="absolute top-0 left-0 w-full h-full object-cover">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Controls and Info Area -->
    <div class="p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </button>
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
        <div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Play/Pause Button (example - actual video controls are built-in) -->
      <div class="flex justify-center">
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
          Play
        </button>
      </div>

      <!-- Additional Info/Metadata -->
      <div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
        <p>Views: 1.2M | Uploaded: 3 days ago</p>
      </div>
    </div>
  </div>
</div>

カテゴリ