Video Tutorial dan Embed YouTube Estetik
Tampilkan video YouTube dengan thumbnail cover beresolusi tinggi, tombol Play bernuansa modern, dan performa cepat (video baru dimuat saat diklik):
A. Video YouTube dengan Thumbnail Otomatis HD
Cukup masukkan data-video-id (contoh ID: dQw4w9WgXcQ), thumbnail dan judul akan tampil otomatis:
HTML
<div class="docs-video-card" data-video-id="dQw4w9WgXcQ">
<div class="video-overlay">
<div class="video-header">
<span class="video-badge">
<iconify-icon icon="lucide:play-circle"></iconify-icon>
Video Panduan
</span>
<span class="text-xs text-slate-300 font-medium bg-slate-900/60 px-2 py-0.5 rounded backdrop-blur-xs">YouTube</span>
</div>
<div class="video-play-btn" title="Putar Video">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
<div>
<h4 class="video-title">Tutorial Integrasi WhatsApp Gateway API - Panduan Lengkap</h4>
</div>
</div>
</div>B. Video YouTube dengan Thumbnail Kustom
Anda juga bisa menyetel gambar thumbnail kustom sendiri menggunakan atribut data-thumb-url:
HTML
<div class="docs-video-card" data-thumb-url="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=1200&q=80" data-video-id="dQw4w9WgXcQ">
<div class="video-overlay">
<div class="video-header">
<span class="video-badge">
<iconify-icon icon="lucide:sparkles"></iconify-icon>
Special Showcase
</span>
<span class="text-xs text-slate-300 font-medium bg-slate-900/60 px-2 py-0.5 rounded backdrop-blur-xs">1080p 60fps</span>
</div>
<div class="video-play-btn" title="Putar Video">
<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
</div>
<div>
<h4 class="video-title">Arsitektur WhatsApp Microservice & Webhook Engine</h4>
</div>
</div>
</div>