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

253

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.1k
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

6 months ago

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

Author:
Coastal UI

6 months ago

900
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

5 months ago

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

4 months ago

254
Featured Items

Author:
Abdul Baset Bappy

2 months ago

355
Simple landing page

Author:
Lîmåã M

2 years ago

18.6k
ChinaEdu
ChinaEdu

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

101
Simple Features section

Author:
Odessa Young

2 years ago

16.3k
vav bar
html , css

Author:
Hacker Development

3 months ago

471
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

8 months ago

2k
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components