Home
KULDEEP
Video Player

Video Player

Youtube Video Player

This tailwind example is contributed by KULDEEP, on 25-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us,Front page

Feature showcase Landing Page

Author KULDEEP

423

Fork Fullscreen

<div class="container mx-auto px-4 relative z-10 mb-28">
    
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl md:text-4xl font-bold mb-6 font-serif">
        See Our <span class="text-[#c69f6c]">Talents</span> in Action
      </h2>
      <p class="text-lg text-gray-300">
        Watch our showcase video to experience the passion and skill of our students and instructors across all performing arts disciplines.
      </p>
    </div>

<div class="max-w-4xl mx-auto">
      <div class="relative rounded-xl overflow-hidden shadow-2xl" id="video-container">
        
        <div id="thumbnail" class="relative">
          <img
            src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
            alt="Video thumbnail"
            class="w-full aspect-video object-cover"
          />
          <div class="absolute inset-0 bg-black/30 flex items-center justify-center cursor-pointer" id="play-button">
            
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-[#b03536]" fill="currentColor" viewBox="0 0 20 20">
              <path d="M4 4l12 6-12 6V4z" />
            </svg>
          </div>
        </div>
        
        <div id="video" class="hidden aspect-video relative ">
          <iframe
            class="absolute inset-0 w-full h-full"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
            title="The Artist Barefoot Showcase"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const playButton = document.getElementById('play-button');
    const thumbnail = document.getElementById('thumbnail');
    const videoContainer = document.getElementById('video');

playButton.addEventListener('click', () => {
      thumbnail.classList.add('hidden');
      videoContainer.classList.remove('hidden');
    });
  });
</script>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.9k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

9 months ago

1.3k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

8 months ago

935
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

7 months ago

1.6k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

6 months ago

342
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k
Portfolio Hero Section 4

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3.6k
Chinese

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

190
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

5 months ago

832
Landing page

Author:
Freja Jensen

2 years ago

13.2k
Features

Author:
Matti

11 months ago

1.1k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components