Componentes de búsqueda

Categorías

Componentes Reproductor de vídeo

Reproductor de vídeo

Interfaz para reproducir contenido de video

Neon_Glow_Video_Player

Un componente de reproducción de video simple y receptivo para sitios web comerciales / corporativos, con efectos de neón / brillo y un esquema de color cálido al atardecer. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex justify-center items-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800">
  <div class="w-full max-w-4xl bg-gradient-to-br from-amber-500 to-red-500 p-1 sm:p-2 rounded-xl shadow-xl dark:from-red-700 dark:to-orange-700 dark:shadow-2xl dark:shadow-red-900/50 transform hover:scale-[1.01] transition-all duration-300 ease-in-out glow-border">
    <div class="relative pb-[56.25%] overflow-hidden rounded-lg">
      <iframe
        class="absolute top-0 left-0 w-full h-full rounded-lg"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-story"
        allowfullscreen
        title="Corporate Introduction Video"
      ></iframe>
    </div>
    <div class="mt-4 flex flex-col sm:flex-row justify-between items-center px-2 py-2">
      <h3 class="text-lg sm:text-xl font-bold text-white mb-2 sm:mb-0 drop-shadow-[0_0_5px_rgba(255,165,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(255,90,0,0.9)]">
        Innovating the Future of Business
      </h3>
      <button class="px-4 py-2 bg-white text-orange-600 rounded-lg text-sm font-semibold shadow-md
                     hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-amber-500
                     dark:bg-orange-800 dark:text-white dark:hover:bg-orange-700 dark:focus:ring-orange-500 dark:focus:ring-offset-red-700
                     glow-button">
        Learn More
      </button>
    </div>
  </div>
</div>

<style>
  /* Base glow effect for the container */
  .glow-border {
    box-shadow: 0 0 15px rgba(255, 120, 0, 0.6), /* Warm orange glow */
                0 0 30px rgba(255, 80, 0, 0.4), /* Deeper orange */
                inset 0 0 10px rgba(255, 180, 0, 0.3); /* Inner slight glow */
    animation: pulse-glow 2s infinite alternate;
  }

  .dark .glow-border {
    box-shadow: 0 0 15px rgba(255, 60, 0, 0.8),
                0 0 30px rgba(255, 0, 0, 0.6),
                inset 0 0 10px rgba(255, 90, 0, 0.4);
  }

  .glow-button {
    box-shadow: 0 0 8px rgba(255, 180, 0, 0.5);
    transition: all 0.3s ease-in-out;
  }

  .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 160, 0, 0.8), 0 0 20px rgba(255, 120, 0, 0.6);
  }

  .dark .glow-button {
    box-shadow: 0 0 8px rgba(255, 90, 0, 0.7);
  }
  
  .dark .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 70, 0, 0.9), 0 0 20px rgba(255, 0, 0, 0.7);
  }

  @keyframes pulse-glow {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 1; transform: scale(1.005); }
  }
</style>

Brutalist_Video_Player

Un componente de reproductor de video de estilo brutalista para sitios web comerciales/corporativos, con alto contraste, tipografía audaz y una combinación de colores complementaria. Totalmente receptivo con soporte para modo oscuro.

Abrir Vista previa

                <div class="font-['Arial_Black',_sans-serif] min-h-screen bg-cyan-100 text-purple-900 dark:bg-purple-900 dark:text-cyan-100 p-4 sm:p-8 md:p-12 lg:p-16 flex items-center justify-center">
  <div class="w-full max-w-7xl border-8 border-purple-900 dark:border-cyan-100 shadow-[10px_10px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[10px_10px_0_0_rgba(8,_145,_178,_1)] bg-purple-200 dark:bg-purple-800 transition-all duration-300 ease-in-out">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-0 border-b-8 border-purple-900 dark:border-cyan-100">
      <!-- Main Video Player -->
      <div class="lg:col-span-2 relative aspect-video bg-black flex items-center justify-center overflow-hidden border-b-8 lg:border-b-0 lg:border-r-8 border-purple-900 dark:border-cyan-100">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <button class="relative z-10 p-6 sm:p-8 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-5xl sm:text-7xl font-extrabold focus:outline-none hover:scale-105 transition-transform duration-200 ease-in-out shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)]">
          ▶
        </button>
      </div>

      <!-- Video Details / Controls -->
      <div class="p-4 sm:p-6 lg:p-8 bg-purple-300 dark:bg-purple-700 transition-colors duration-300 ease-in-out flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
            Corporate Vision: Future Forward
          </h2>
          <p class="text-base sm:text-lg mb-4 opacity-80 min-h-[60px]">
            Unveiling our strategic roadmap for innovation and sustainable growth across global markets.
          </p>
          <div class="flex items-center mb-6">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Presenter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-purple-900 dark:border-cyan-100 mr-4">
            <div>
              <p class="text-lg font-bold uppercase">Dr. Evelyn Reed</p>
              <p class="text-sm opacity-70">Chief Innovation Officer</p>
            </div>
          </div>
        </div>

        <div class="mt-auto">
          <div class="flex justify-between items-center mb-4 border-t-4 border-purple-900 dark:border-cyan-100 pt-4">
            <span class="text-xl sm:text-2xl font-bold">0:00 / 12:45</span>
            <div class="flex space-x-2">
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">⚙️</button>
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">🔲</button>
            </div>
          </div>
          <div class="w-full h-4 bg-purple-500 dark:bg-purple-600 border-2 border-purple-900 dark:border-cyan-100 mb-4">
            <div class="h-full w-1/4 bg-cyan-500 dark:bg-cyan-600 border-r-2 border-r-purple-900 dark:border-r-cyan-100"></div>
          </div>
          <button class="w-full p-3 sm:p-4 bg-cyan-600 dark:bg-cyan-500 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold uppercase shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)] hover:scale-[1.01] transition-transform duration-200 focus:outline-none">
            Watch Full Presentation
          </button>
        </div>
      </div>
    </div>

    <!-- Related Videos / Episodes -->
    <div class="p-4 sm:p-6 lg:p-8">
      <h3 class="text-2xl sm:text-3xl font-extrabold mb-6 uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
        Related Insights & Episodes
      </h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">

        <!-- Related Video Item 1 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=2" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Market Trends 2024</h4>
          <p class="text-sm opacity-80 mb-2">Deep dive into emerging market opportunities.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>8:15</span>
            <span>3 days ago</span>
          </div>
        </div>

        <!-- Related Video Item 2 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=3" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Sustainable Practices</h4>
          <p class="text-sm opacity-80 mb-2">Our commitment to ecological stewardship.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>15:30</span>
            <span>1 week ago</span>
          </div>
        </div>

        <!-- Related Video Item 3 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=4" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Team Synergy Workshop</h4>
          <p class="text-sm opacity-80 mb-2">Behind the scenes of our collaborative culture.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>22:00</span>
            <span>2 weeks ago</span>
          </div>
        </div>

        <!-- Related Video Item 4 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=5" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Client Success Stories</h4>
          <p class="text-sm opacity-80 mb-2">Hear directly from our valued partners.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>10:05</span>
            <span>1 month ago</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de vídeo complejo y receptivo para el comercio electrónico, con colores triádicos y un diseño centrado en la microinteracción. Incluye controles de reproducción, volumen, barra de progreso, pantalla completa, configuraciones y una superposición de productos, con soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden
              flex flex-col lg:flex-row transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-700">

    <!-- Video Player Section -->
    <div class="relative flex-1 bg-black overflow-hidden group">
      <video class="w-full h-full object-contain" poster="https://picsum.photos/1280/720?random=1" controls="false" playsinline>
        <!-- Replace with actual video source -->
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>

      <!-- Overlay for play button and controls fade -->
      <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <!-- Big Play Button (initially visible, fades out on play) -->
        <button class="absolute text-white text-opacity-80 hover:text-opacity-100 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-teal-500/50 rounded-full">
          <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z" />
          </svg>
        </button>

        <!-- Controls bar (fades in on hover) -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/70 to-transparent
                    translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out
                    flex flex-col space-y-2 opacity-0 group-hover:opacity-100">

          <!-- Progress Bar -->
          <div class="w-full h-2 bg-gray-700 rounded-full cursor-pointer group">
            <div class="h-full bg-teal-400 rounded-full w-1/3 group-hover:bg-teal-300 transition-all duration-150 relative">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-teal-400 rounded-full scale-0 group-hover:scale-100 transition-transform duration-150"></div>
            </div>
          </div>

          <!-- Controls -->
          <div class="flex items-center justify-between text-white text-opacity-90">
            <div class="flex items-center space-x-4">
              <!-- Play/Pause -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 19.823L22 12 14.017 4.177V9H2v6h12.017z" />
                </svg>
              </button>
              <!-- 10s back -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2zm6.27 4.54l-1.42 1.42C16.14 15.65 15 16 15 16s0-.8.03-1.07l1.09-1.09c.47-.47.66-1.12.5-1.74l-.99-3.46c-.16-.62-.97-1.1-1.55-.77l-1.76.99-1.42-1.42L15 6.77c.46-.22.98-.32 1.5-.27l3.46.99c.62.16 1.1.97.77 1.55l-.99 1.76-1.42 1.42z" />
                </svg>
              </button>

              <!-- Volume -->
              <div class="relative flex items-center group">
                <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 10v4c0 .55.45 1 1 1h3l5 5V5l-5 5H4c-.55 0-1 .45-1 1zm12.5 4.58l-1.41-1.41c.95-.95 1.56-2.22 1.56-3.57s-.61-2.62-1.56-3.57l1.41-1.41c1.36 1.36 2.22 3.25 2.22 5s-.86 3.64-2.22 5z" />
                  </svg>
                </button>
                <input type="range" min="0" max="100" value="70" class="ml-2 w-0 group-hover:w-24 overflow-hidden appearance-none bg-transparent h-1 rounded-full dark:bg-gray-700 transition-all duration-300 ease-out focus:outline-none
                                      [&::-webkit-slider-runnable-track]:bg-gray-700 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-teal-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:-mt-1.5
                                      [&::-moz-range-track]:bg-gray-700 [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-thumb]:bg-teal-400 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full">
              </div>

              <span class="text-sm">00:00 / 02:30</span>
            </div>

            <div class="flex items-center space-x-4">
              <!-- Settings -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                </svg>
              </button>
              <!-- Fullscreen -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                </svg>
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- Product Info Section -->
    <div class="w-full lg:w-96 p-6 lg:p-8 flex flex-col space-y-6 bg-yellow-50 dark:bg-gray-800 
                text-gray-900 dark:text-gray-100 border-t lg:border-t-0 lg:border-l border-yellow-200 dark:border-gray-700">

      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-2xl lg:text-3xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight">Organic Hand Cream</h2>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Lavender & Aloe Vera</p>
        </div>
        <span class="text-3xl font-bold text-teal-600 dark:text-teal-400 animate-pulse-once">$29.99</span>
      </div>

      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
        Discover the soothing power of nature with our best-selling hand cream. Enriched with organic lavender and aloe vera, it deeply moisturizes and rejuvenates your skin, leaving it soft and fragrant.
      </p>

      <!-- Features/Highlights -->
      <div class="grid grid-cols-2 gap-4 text-sm">
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Organic Certified</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2zm6 13H4V8h16v11z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Vegan Friendly</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">5-star Rated</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Cruelty-Free</span>
        </div>
      </div>

      <!-- Call to Action -->
      <button class="w-full py-3 px-6 rounded-xl
                     bg-teal-500 text-white text-lg font-semibold shadow-md
                     hover:bg-teal-600 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-teal-500/50
                     active:scale-98 transform transition-all duration-200 ease-in-out
                     dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500/50">
        Add to Cart
        <span class="ml-2 inline-block transition-transform group-hover:translate-x-1 duration-200 animate-bounce-horizontal-once">
          <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.25 10.01l-1.63-1.63c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.19 11l-9 9H4v-1.72L11 9.19l1.63 1.63c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L17.25 10.01zM11 6.17l5.24 5.24L11 16.65 6.17 11.24zM16 2l-2 2h-4L8 2H2v20h20V2h-6z"/>
          </svg>
        </span>
      </button>

      <!-- Small Description / Reviews -->
      <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-2">
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar">
        </div>
        <span>+2,450 Happy Customers</span>
      </div>

    </div>

  </div>

  <!-- Custom keyframe animation definitions for microinteractions -->
  <style>
    @keyframes pulse-once {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .animate-pulse-once {
      animation: pulse-once 1.2s ease-in-out;
    }

    @keyframes bounce-horizontal-once {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(5px); }
      50% { transform: translateX(-5px); }
      75% { transform: translateX(2px); }
    }
    .animate-bounce-horizontal-once {
      animation: bounce-horizontal-once 0.8s ease-out;
    }
  </style>

  <!-- Dark mode toggle for demonstration, not part of the component itself -->
  <script>
    // This script toggles dark mode for demonstration purposes.
    // In a real application, you'd likely use a framework or store user preference.
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    function toggleDarkMode() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
      } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
      }
    }
  </script>
  <button onclick="toggleDarkMode()" class="fixed bottom-4 right-4 p-3 rounded-full bg-gray-800 text-white shadow-lg z-50 dark:bg-white dark:text-gray-900 focus:outline-none focus:ring-4 focus:ring-teal-500/50">
    <svg class="w-6 h-6 block dark:hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    <svg class="w-6 h-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.04 6.29a.75.75 0 0 1 1.06-.02l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-.02 1.06ZM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1.5a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H12a.75.75 0 0 1 .75.75ZM16.96 6.29A.75.75 0 0 1 18.02 7.35l-1.5 1.5a.75.75 0 0 1-1.06-.02l-1.5-1.5a.75.75 0 0 1 .02-1.06ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5.25 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM20.72 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5h2.25a.75.75 0 0 1 .75.75ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM7.04 17.71a.75.75 0 0 1-.02-1.06l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-1.06.02Zm9.92 0a.75.75 0 0 1 .02-1.06l1.5-1.5a.75.75 0 1 1 1.04 1.08l-1.5 1.5a.75.75 0 0 1-1.06-.02Z"/></svg>
  </button>

</div>

Componente de reproductor de vídeo

Un reproductor de video de estilo Glassmorphism con elementos translúcidos similares al vidrio esmerilado, una combinación de colores pastel y una interfaz compleja adecuada para sitios web comerciales / corporativos. Es compatible con el diseño responsivo y un tema oscuro que utiliza Tailwind CSS, sin JavaScript.

Abrir Vista previa

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

Componente de reproductor de vídeo

Componente de reproductor de video receptivo con diseño Glassmorphism, combinación de colores de tonos tierra y compatibilidad con modo oscuro. Utiliza HTML simple y CSS de Tailwind.

Abrir Vista previa

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

Componente de reproductor de vídeo

Componente de reproductor de video con estilo Glassmorphism, esquema de color análogo y complejidad moderada para fines de blog / contenido, con diseño receptivo y soporte de tema oscuro mediante Tailwind CSS. Sin Javascript.

Abrir Vista previa

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