Component:

Demo-video SaaS Minimal

Name: Demo-video SaaS Minimal
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Demo video Page Section Content SaaS Minimal

Colors:

Description:

This carefully crafted Demo video component is perfect for SaaS landing pages, featuring a Minimal design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: Demo Video
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
  --color-white: #ffffff;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;
  --color-blue-600: #2563eb;
  --color-black: #000000;
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --transition-transform: transform 0.2s;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Component Styles */
.demo-section {
  background-color: var(--color-white);
  padding: 4rem 1rem;
}

.container {
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto;
  padding: 0 1rem;
}

.header {
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
  text-align: center;
  margin-bottom: 2rem;
}

.header h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 1rem;
}

.header p {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--color-gray-600);
}

.video-container {
  position: relative;
  margin: 0 auto;
  max-width: 64rem; /* max-w-5xl */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--color-gray-900);
}

.thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4); /* bg-gray-900/40 */
}

.play-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.play-button-inner {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  padding: 1rem;
  transition: var(--transition-transform);
}

.play-button-inner:hover {
  transform: scale(1.1);
}

.play-icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-blue-600);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  display: none;
}

.video-player.active {
  display: block;
}

.video-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Responsive Breakpoints */
@media (min-width: 640px) {
  .demo-section {
    padding: 6rem 1.5rem;
  }
  
  .container {
    padding: 0 1.5rem;
  }
  
  .header h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}
</style>

<section class="demo-section">
  <div class="container">
    <!-- Section Header -->
    <div class="header">
      <h2>See how it works in action</h2>
      <p>Watch our 2-minute demo to see how our platform streamlines your workflow and boosts productivity.</p>
    </div>

    <!-- Video Container -->
    <div class="video-container">
      <!-- Video Thumbnail Container -->
      <div class="video-wrapper">
        <!-- SaaS hero image by Figcomponents (CC BY 4.0) -->
        <img
          src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
          alt="SaaS platform interface preview"
          class="thumbnail"
        />
        <!-- Dark overlay -->
        <div class="overlay"></div>

        <!-- Play Button -->
        <button 
          type="button" 
          class="play-button"
          aria-label="Play demo video"
          onclick="toggleVideo()"
        >
          <span class="sr-only">Play video</span>
          <div class="play-button-inner">
            <svg class="play-icon" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
            </svg>
          </div>
        </button>

        <!-- Video Element (Hidden by default) -->
        <div id="videoPlayer" class="video-player">
          <iframe 
            src="about:blank" 
            title="Product demo video"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function toggleVideo() {
  const videoPlayer = document.getElementById('videoPlayer');
  const iframe = videoPlayer.querySelector('iframe');
  
  if (!videoPlayer.classList.contains('active')) {
    // Show video player and set video URL
    videoPlayer.classList.add('active');
    // Replace with your actual video URL
    iframe.src = 'https://www.youtube-nocookie.com/embed/your-video-id?autoplay=1';
  } else {
    // Hide video player and reset URL
    videoPlayer.classList.remove('active');
    iframe.src = 'about:blank';
  }
}
</script>


                <!--
@type: Demo Video
@industry: SaaS
@style: Minimal
@category: Page Section, Content
@framework: Tailwind
@license: Free
-->

<section class="bg-white py-16 sm:py-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="max-w-3xl mx-auto text-center mb-8">
      <h2 class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
        See how it works in action
      </h2>
      <p class="mt-4 text-lg leading-8 text-gray-600">
        Watch our 2-minute demo to see how our platform streamlines your workflow and boosts productivity.
      </p>
    </div>

    <!-- Video Container -->
    <div class="relative mx-auto max-w-5xl rounded-2xl overflow-hidden shadow-xl">
      <!-- Video Thumbnail Container -->
      <div class="aspect-video bg-gray-900 relative">
        <!-- SaaS hero image by Figcomponents (CC BY 4.0) -->
        <img
          src="https://landinggo.com/assets/img/stock/hero/saas-figcomp-1320x900.webp"
          alt="SaaS platform interface preview"
          class="absolute inset-0 w-full h-full object-cover"
        />
        <!-- Dark overlay -->
        <div class="absolute inset-0 bg-gray-900/40"></div>

        <!-- Play Button -->
        <button 
          type="button" 
          class="absolute inset-0 w-full h-full flex items-center justify-center"
          aria-label="Play demo video"
          onclick="toggleVideo()"
        >
          <span class="sr-only">Play video</span>
          <div class="bg-white/90 backdrop-blur-sm rounded-full p-4 cursor-pointer transform transition-transform duration-200 hover:scale-110">
            <svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
            </svg>
          </div>
        </button>

        <!-- Video Element (Hidden by default) -->
        <div id="videoPlayer" class="hidden absolute inset-0 w-full h-full bg-black">
          <iframe 
            class="w-full h-full"
            src="about:blank" 
            title="Product demo video"
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function toggleVideo() {
  const videoPlayer = document.getElementById('videoPlayer');
  const iframe = videoPlayer.querySelector('iframe');
  
  if (videoPlayer.classList.contains('hidden')) {
    // Show video player and set video URL
    videoPlayer.classList.remove('hidden');
    // Replace with your actual video URL
    iframe.src = 'https://www.youtube-nocookie.com/embed/your-video-id?autoplay=1';
  } else {
    // Hide video player and reset URL
    videoPlayer.classList.add('hidden');
    iframe.src = 'about:blank';
  }
}
</script>

Demo-video SaaS Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions