Tailwind Css
Lecteur Video
Video Player
Responsive
Animations
Thumbnail
Hover
Controls
Html
Snippet
Lecteur vidéo Tailwind CSS avec design moderne, animations hover, thumbnail preview, contrôles personnalisés et styles utility-first.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippet Video Tailwindcss 2026 04280038 | AngularForAll</title>
<meta name="theme-color" content="#0f172a">
<!-- Tailwind CSS v3 + CDN + plugin typography pour style riche -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Ajout de classes personnalisées et overrides Tailwind -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Inter', sans-serif;
}
/* animations personnalisées pour le style Tailwind */
@keyframes float-slow {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.animate-float {
animation: float-slow 5s ease-in-out infinite;
}
.glass-card {
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(12px);
border: 1px solid rgba(56, 189, 248, 0.2);
}
.video-glow:hover video {
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.5), 0 20px 35px -12px rgba(0,0,0,0.5);
transition: all 0.2s ease;
}
/* scrollbar tailwind style */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #38bdf8;
border-radius: 20px;
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-950 via-slate-900 to-gray-900 text-slate-200 antialiased">
<!-- navbar épurée mais distinctive Tailwind -->
<nav class="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-xl border-b border-cyan-500/30 shadow-lg">
<div class="max-w-7xl mx-auto px-5 sm:px-8 py-3 flex items-center justify-between flex-wrap">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-gradient-to-tr from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center shadow-lg">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h16v12H4z M8 4h8v2H8z M6 8h12v8H6z"/></svg>
</div>
<span class="font-extrabold text-xl tracking-tight bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-transparent">Tail<span class="text-white">Video</span></span>
</div>
<div class="flex gap-3 text-sm font-medium">
<span class="px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-300 border border-cyan-500/30"><i class="not-italic">🎬 5 styles uniques</i></span>
<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/30 hidden sm:inline-block"><i class="not-italic">⚡ Tous attributs HTML5</i></span>
</div>
</div>
</nav>
<!-- Hero section minimaliste avec contraste -->
<header class="relative overflow-hidden pt-12 pb-10 px-4">
<div class="absolute inset-0 bg-gradient-to-r from-cyan-950/20 via-transparent to-indigo-950/20 pointer-events-none"></div>
<div class="max-w-5xl mx-auto text-center relative">
<div class="inline-flex items-center gap-2 bg-slate-800/50 backdrop-blur-sm rounded-full px-4 py-1.5 border border-cyan-400/40 mb-6">
<span class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
<span class="text-xs uppercase tracking-wider font-semibold text-cyan-300">HTML5 Video • Tailwind CSS</span>
</div>
<h1 class="text-4xl md:text-6xl font-black mb-5 leading-tight">
<span class="bg-gradient-to-r from-white via-cyan-200 to-blue-300 bg-clip-text text-transparent">5 expériences vidéo</span>
<br><span class="text-slate-300">avec toutes les options natives</span>
</h1>
<p class="text-lg text-slate-300 max-w-2xl mx-auto mb-8">Contrôles, autoplay, loop, muted, poster, preload, playsinline, Picture-in-Picture, pistes texte, controlslist — démonstration design Tailwind.</p>
<div class="flex flex-wrap justify-center gap-2 text-xs font-mono">
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">🎮 controls</span>
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">🔄 loop / autoplay</span>
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">🖼️ poster image</span>
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">🔇 muted</span>
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">📺 PiP natif</span>
<span class="bg-slate-800/70 px-3 py-1.5 rounded-full border border-slate-700">📜 <track> VTT</span>
</div>
</div>
</header>
<!-- Grille responsive Tailwind (différente de Bootstrap : utilisation de grid + gap + cards avec style glass morphisme) -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 py-10 md:py-14">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 auto-rows-fr">
<!-- EXEMPLE 1 : Carte style "moderne glass" - Contrôles complets poster -->
<div class="glass-card rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:border-cyan-400/40 group video-glow">
<div class="bg-gradient-to-r from-slate-800/60 to-slate-900/60 px-5 py-3 border-b border-cyan-500/20 flex justify-between items-center flex-wrap gap-2">
<div class="flex items-center gap-2 font-bold">
<div class="w-7 h-7 rounded-lg bg-cyan-500/20 flex items-center justify-center text-sm">🎛️</div>
<h2 class="text-base font-extrabold">Style 1 · Contrôles+Poster</h2>
</div>
<span class="text-[11px] font-mono bg-black/40 px-2 py-1 rounded-full text-cyan-300">controls · poster</span>
</div>
<div class="p-4 bg-black/40">
<video class="w-full rounded-xl shadow-2xl" controls preload="metadata" poster="public/loader.gif">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="p-4 text-xs border-t border-slate-700/40 bg-slate-900/30">
<p class="flex flex-wrap gap-x-3 gap-y-1"><span class="font-semibold text-cyan-300">⚙️ Attributs :</span> <code class="bg-slate-800 px-1.5 rounded">controls</code> <code class="bg-slate-800 px-1.5 rounded">poster</code> <code class="bg-slate-800 px-1.5 rounded">preload=metadata</code></p>
<p class="mt-1 text-slate-400"><span class="font-medium text-indigo-300">💡</span> Interface complète + affiche personnalisée avant lancement.</p>
</div>
</div>
<!-- EXEMPLE 2 : Autoplay Muted Loop (couleur accent différente: violet) -->
<div class="glass-card rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:border-fuchsia-400/40 group">
<div class="bg-gradient-to-r from-slate-800/60 to-fuchsia-950/30 px-5 py-3 border-b border-fuchsia-400/20 flex justify-between items-center flex-wrap gap-2">
<div class="flex items-center gap-2 font-bold"><div class="w-7 h-7 rounded-lg bg-fuchsia-500/20 flex items-center justify-center">🔄</div><h2 class="text-base font-extrabold">Style 2 · Autoplay Muted Loop</h2></div>
<span class="text-[11px] font-mono bg-black/40 px-2 py-1 rounded-full text-fuchsia-300">autoplay muted loop</span>
</div>
<div class="p-4 bg-black/40">
<video class="w-full rounded-xl shadow-2xl" autoplay muted loop playsinline preload="auto">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="p-4 text-xs border-t border-slate-700/40 bg-slate-900/30">
<p><span class="font-semibold text-fuchsia-300">🔁 Attributs :</span> <code class="bg-slate-800 px-1.5 rounded">autoplay muted loop playsinline preload=auto</code></p>
<p class="mt-1 text-slate-400">Boucle silencieuse automatique — parfait pour ambiances immersives.</p>
</div>
</div>
<!-- EXEMPLE 3 : Sous-titres + track (exemple éducatif) -->
<div class="glass-card rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:border-emerald-400/40 group">
<div class="bg-gradient-to-r from-slate-800/60 to-emerald-950/30 px-5 py-3 border-b border-emerald-400/20 flex justify-between items-center flex-wrap gap-2">
<div class="flex items-center gap-2"><div class="w-7 h-7 rounded-lg bg-emerald-500/20 flex items-center justify-center">📜</div><h2 class="text-base font-extrabold">Style 3 · Piste texte (VTT)</h2></div>
<span class="text-[11px] font-mono bg-black/40 px-2 py-1 rounded-full text-emerald-300">track · subtitles</span>
</div>
<div class="p-4 bg-black/40">
<video class="w-full rounded-xl shadow-2xl" controls preload="auto" crossorigin="anonymous"> <source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
<!--track src="public/cc-subtitles.vtt" kind="subtitles" srclang="en" label="English CC" default-->
</video>
</div>
<div class="p-4 text-xs border-t border-slate-700/40 bg-slate-900/30">
<p><span class="font-semibold text-emerald-300">🎙️ Piste texte :</span> WebVTT (sous-titres anglais intégrés)</p>
<p><span class="font-semibold text-emerald-300">preload :</span> auto + crossorigin="anonymous"</p>
</div>
</div>
<!-- EXEMPLE 4 : controlslist "nodownload nofullscreen" + poster dynamique style border neon -->
<div class="glass-card rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:border-amber-400/40 group">
<div class="bg-gradient-to-r from-slate-800/60 to-amber-950/30 px-5 py-3 border-b border-amber-400/20 flex justify-between items-center flex-wrap gap-2">
<div class="flex items-center gap-2"><div class="w-7 h-7 rounded-lg bg-amber-500/20 flex items-center justify-center">🚫</div><h2 class="text-base font-extrabold">Style 4 · Contrôles restreints</h2></div>
<span class="text-[11px] font-mono bg-black/40 px-2 py-1 rounded-full text-amber-300">controlslist</span>
</div>
<div class="p-4 bg-black/40">
<video class="w-full rounded-xl shadow-2xl" controls controlslist="nodownload nofullscreen" crossorigin="anonymous" poster="public/loader.gif" preload="metadata"> <source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="p-4 text-xs border-t border-slate-700/40 bg-slate-900/30">
<p><span class="font-semibold text-amber-300">⛔ controlslist :</span> "nodownload nofullscreen" (cache téléchargement/plein écran)</p>
<p><span class="font-semibold text-amber-300">🖼️ Poster :</span> image externe HD + crossorigin</p>
</div>
</div>
<!-- EXEMPLE 5 : Picture-in-Picture natif + PiP events -->
<div class="glass-card rounded-2xl overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:border-rose-400/40 group">
<div class="bg-gradient-to-r from-slate-800/60 to-rose-950/30 px-5 py-3 border-b border-rose-400/20 flex justify-between items-center flex-wrap gap-2">
<div class="flex items-center gap-2"><div class="w-7 h-7 rounded-lg bg-rose-500/20 flex items-center justify-center">📺</div><h2 class="text-base font-extrabold">Style 5 · Picture-in-Picture</h2></div>
<span class="text-[11px] font-mono bg-black/40 px-2 py-1 rounded-full text-rose-300">PiP · autoplay muted</span>
</div>
<div class="p-4 bg-black/40">
<video id="pipTailwindVideo" class="w-full rounded-xl shadow-2xl" controls autoplay muted playsinline preload="metadata" disablePictureInPicture="false">
<source src="public/video-robot.mp4" type="video/mp4">
<source src="public/video-robot.webm" type="video/webm">
</video>
</div>
<div class="p-4 text-xs border-t border-slate-700/40 bg-slate-900/30">
<p><span class="font-semibold text-rose-300">✨ PiP natif :</span> bouton "Picture in picture" sur navigateurs compatibles</p>
<p><span class="font-semibold text-rose-300">🎧 Démarrage :</span> muet + autoplay, utilisateur peut activer le son et utiliser PiP.</p>
</div>
</div>
</div>
<!-- section méga attributs (design différent de bootstrap) style terminal -->
<div class="mt-20 mb-8 relative">
<div class="absolute inset-0 bg-gradient-to-r from-cyan-600/5 via-indigo-600/5 to-purple-600/5 rounded-3xl blur-2xl"></div>
<div class="relative bg-slate-900/50 backdrop-blur-sm rounded-2xl border border-slate-700 p-6 md:p-8 font-mono text-sm">
<div class="flex items-center gap-3 mb-5">
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg"><span class="text-white font-bold text-md"></></span></div>
<h3 class="text-xl font-black tracking-tight bg-gradient-to-r from-cyan-200 to-indigo-300 bg-clip-text text-transparent">Tous les attributs HTML5 de la balise <video></h3>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 text-slate-300">
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">src</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">controls</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">autoplay</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">loop</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">muted</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">poster</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">preload</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">playsinline</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">crossorigin</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">controlslist</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded">disablePictureInPicture</code></div>
<div class="flex items-center gap-1"><span class="text-cyan-400">▶</span> <code class="bg-slate-800 px-1.5 rounded"><track></code> (VTT)</div>
</div>
<div class="mt-4 pt-3 border-t border-slate-700 text-xs text-slate-400 flex flex-wrap justify-between">
<span>✨ Ces 5 cartes couvrent chaque cas d'usage : interface standard, boucle muette, piste textuelle, restrictions interface, mode Picture-in-Picture.</span>
</div>
</div>
</div>
<!-- petite citation / astuce Tailwind -->
<div class="flex flex-wrap gap-3 justify-between items-center bg-slate-900/30 p-5 rounded-2xl border border-slate-800 mt-6">
<div class="flex items-center gap-2"><svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg><span class="font-medium">Tailwind CSS · Design différent des frameworks classiques : cartes glassmorphisme, animations fluides, grille flexible.</span></div>
<span class="text-xs bg-slate-800 px-3 py-1.5 rounded-full text-cyan-300">🎯 Compatible Chrome, Firefox, Safari, Edge</span>
</div>
</main>
<!-- Footer tailwind minimal -->
<footer class="border-t border-slate-800 bg-slate-950/60 mt-12 py-8">
<div class="max-w-7xl mx-auto px-5 text-center text-slate-400 text-sm">
<p>© 2025 — Démonstration des attributs vidéo HTML5 avec Tailwind CSS. Vidéos issues de usage éducatif.</p>
</div>
</footer>
<!-- Petit script pour PiP logs et console événements (aucune librairie externe) -->
<script>
(function(){
// Sélectionner toutes les vidéos pour logger les événements
const videos = document.querySelectorAll('video');
videos.forEach((vid, idx) => {
vid.addEventListener('play', () => console.info(`[Tailwind] ▶️ Vidéo ${idx+1} lecture`));
vid.addEventListener('pause', () => console.info(`[Tailwind] ⏸️ Vidéo ${idx+1} pause`));
vid.addEventListener('volumechange', () => {
if(!vid.muted && vid.volume > 0) console.info(`[Tailwind] 🔊 Vidéo ${idx+1} volume: ${vid.volume}`);
else if(vid.muted) console.info(`[Tailwind] 🔇 Vidéo ${idx+1} muette`);
});
if(vid.id === 'pipTailwindVideo') {
vid.addEventListener('enterpictureinpicture', () => console.info('📺 [Tailwind] Mode Picture-in-Picture activé'));
vid.addEventListener('leavepictureinpicture', () => console.info('🖥️ [Tailwind] Sortie du mode PiP'));
}
});
// Forcer l'autoplay si jamais (pour les vidéos muted déjà géré)
const autoVids = document.querySelectorAll('video[autoplay]');
autoVids.forEach(v => v.play().catch(e => console.warn("Autoplay nécessite geste utilisateur sur certains navigateurs?", e)));
console.info("🎨 Tailwind CSS - 5 styles vidéo avec toutes les options HTML5 (contrôles, loop, poster, controlslist, PiP, pistes)");
})();
</script>
</body>
</html>
Télécharger le fichier source