Uikit
Lecteur Video
Video Player
Lightbox
Responsive
Overlay
Controls
Modal
Html
Snippet
Lecteur vidéo UIkit avec lightbox intégrée, contrôles complets, overlay centré et composants UIkit natifs pour une intégration rapide.
<!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 Uikit 2026 04280044 | AngularForAll</title>
<meta name="theme-color" content="#f8fafc">
<!-- UIkit CSS + JS + Icons (mode jour / light par défaut) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/css/uikit-core.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
background: #fefefe;
background-image: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
color: #1e293b;
}
/* override UIkit card style pour version light et plus moderne */
.uk-card-custom {
background: #ffffff;
border-radius: 28px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.25s ease;
border: 1px solid #eef2f6;
}
.uk-card-custom:hover {
transform: translateY(-5px);
box-shadow: 0 20px 28px -12px rgba(0, 32, 64, 0.12);
border-color: #cbd5e1;
}
.video-wrapper {
background: #f8fafc;
border-radius: 20px;
padding: 4px;
}
video {
width: 100%;
border-radius: 18px;
background: #000000;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
display: block;
}
.badge-uikit-light {
background: #eef2ff;
color: #1e4a7a;
font-weight: 500;
padding: 0.2rem 0.9rem;
border-radius: 40px;
font-size: 0.7rem;
letter-spacing: 0.2px;
}
.attr-tag {
background: #f3f4f6;
border-radius: 24px;
padding: 0.2rem 0.7rem;
font-family: 'Inter', monospace;
font-size: 0.7rem;
font-weight: 500;
color: #0f3b5c;
}
.hero-gradient-text {
background: linear-gradient(135deg, #0f2b3d, #1e6f9f, #0f3b5c);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
footer {
border-top: 1px solid #e2e8f0;
background: #fcfdff;
}
.uk-section-muted-light {
background-color: #f8fafc;
}
@media (max-width: 640px) {
.uk-card-custom {
border-radius: 20px;
}
video {
border-radius: 14px;
}
}
/* UIkit light theme helper */
.uk-light-bg-card {
background: #ffffff;
}
.uk-text-soft {
color: #475569;
}
.uk-icon-small {
stroke-width: 1.2;
}
</style>
</head>
<body>
<!-- Navbar UIkit avec style lumineux -->
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar">
<nav class="uk-navbar-container uk-navbar-transparent" style="background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid #e9edf2;">
<div class="uk-container uk-container-large">
<div uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#" style="font-weight: 800; font-size: 1.6rem;">
<span class="uk-text-primary">🎬</span> UI<span class="uk-text-primary">Video</span>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible@m">
<li><a href="#" style="font-weight: 500;">Accueil</a></li>
<li><a href="#exemples" style="font-weight: 500;">Exemples</a></li>
<li><a href="#attributs" style="font-weight: 500;">Attributs HTML5</a></li>
</ul>
<div>
<span class="uk-badge uk-background-primary uk-padding-small uk-border-pill uk-text-small" style="background: #eef2ff; color:#1e4a7a;">☀️ Mode Jour</span>
</div>
</div>
</div>
</div>
</nav>
</div>
<!-- Hero Section UIkit (lumineuse, épurée) -->
<div class="uk-section uk-padding-small uk-section-default" style="background: transparent;">
<div class="uk-container uk-container-large uk-text-center">
<div class="uk-margin-medium">
<div class="uk-flex uk-flex-center uk-gap-small uk-margin-bottom">
<span class="badge-uikit-light"><span uk-icon="icon: video-camera; ratio: 0.6"></span> HTML5 Video</span>
<span class="badge-uikit-light"><span uk-icon="icon: uikit; ratio: 0.6"></span> UIkit Framework</span>
<span class="badge-uikit-light"><span uk-icon="icon: sun; ratio: 0.6"></span> Thème Jour / Light</span>
</div>
<h1 class="uk-heading-medium uk-margin-remove-bottom hero-gradient-text" style="font-weight: 800;">5·expériences vidéo</h1>
<h2 class="uk-h2 uk-text-muted uk-margin-remove-top uk-text-soft" style="font-weight: 400;">Tous les attributs natifs de la balise <code class="uk-label uk-label-default" style="background:#eef2ff; color:#0b3b5e;"><video></code></h2>
<p class="uk-text-lead uk-width-2xlarge@m uk-margin-auto uk-text-soft">
Contrôles, autoplay, loop, muted, poster, preload, playsinline, Picture-in-Picture, pistes texte WebVTT, controlslist — design clair et aérien.
</p>
<div class="uk-flex uk-flex-center uk-flex-wrap uk-gap-small uk-margin-medium-top">
<span class="attr-tag">🎮 controls</span>
<span class="attr-tag">🔄 autoplay · muted · loop</span>
<span class="attr-tag">🖼️ poster image</span>
<span class="attr-tag">📺 Picture-in-Picture</span>
<span class="attr-tag">📜 <track> VTT subtitles</span>
<span class="attr-tag">⚙️ controlslist</span>
</div>
</div>
</div>
</div>
<!-- Grille UIkit des 5 cartes vidéo (style différent, light / designs uniques) -->
<div class="uk-container uk-container-large uk-margin-large-bottom" id="exemples">
<div class="uk-grid uk-grid-large uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l" data-uk-grid>
<!-- EXEMPLE 1 : Contrôles complets + poster HD -->
<div>
<div class="uk-card uk-card-custom uk-card-default uk-card-hover uk-border-rounded uk-overflow-hidden">
<div class="uk-card-header uk-flex uk-flex-between uk-flex-middle uk-background-muted" style="background:#fcfdff; border-bottom: 1px solid #ecf3f9;">
<div class="uk-flex uk-flex-middle uk-gap-small">
<span uk-icon="icon: settings; ratio: 1.2" class="uk-text-primary"></span>
<h3 class="uk-card-title uk-margin-remove">Style 1 · Controls + Poster</h3>
</div>
<span class="attr-tag">controls poster preload</span>
</div>
<div class="uk-card-body video-wrapper uk-padding-small">
<video 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="uk-card-footer uk-text-small uk-text-soft">
<span uk-icon="icon: info; ratio: 0.7"></span> Interface utilisateur complète + affiche personnalisée avant lancement. Formats MP4 + WebM.
</div>
</div>
</div>
<!-- EXEMPLE 2 : Autoplay Muted Loop (animation douce) -->
<div>
<div class="uk-card uk-card-custom uk-card-default uk-card-hover uk-border-rounded">
<div class="uk-card-header uk-flex uk-flex-between uk-flex-middle" style="background:#fcfdff; border-bottom: 1px solid #eef2f8;">
<div class="uk-flex uk-flex-middle uk-gap-small">
<span uk-icon="icon: loop; ratio: 1.2" class="uk-text-success"></span>
<h3 class="uk-card-title uk-margin-remove">Style 2 · Autoplay Muted Loop</h3>
</div>
<span class="attr-tag">autoplay muted loop</span>
</div>
<div class="uk-card-body video-wrapper uk-padding-small">
<video 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="uk-card-footer uk-text-small uk-text-soft">
<span uk-icon="icon: sound; ratio: 0.7"></span> Lecture automatique sans son, se répète en boucle — idéal pour ambiances / bannières.
</div>
</div>
</div>
<!-- EXEMPLE 3 : Piste texte/sous-titres VTT -->
<div>
<div class="uk-card uk-card-custom uk-card-default uk-card-hover uk-border-rounded">
<div class="uk-card-header uk-flex uk-flex-between uk-flex-middle" style="background:#fcfdff; border-bottom: 1px solid #eef2f8;">
<div class="uk-flex uk-flex-middle uk-gap-small">
<span uk-icon="icon: album; ratio: 1.2" class="uk-text-warning"></span>
<h3 class="uk-card-title uk-margin-remove">Style 3 · Sous‑titres (WebVTT)</h3>
</div>
<span class="attr-tag"><track> subtitles</span>
</div>
<div class="uk-card-body video-wrapper uk-padding-small">
<video controls preload="auto" crossorigin="anonymous">
<source src="public/video-robot.mp4" type="video/mp4">
<!--track src="public/cc-subtitles.vtt" kind="subtitles" srclang="en" label="English" default-->
</video>
</div>
<div class="uk-card-footer uk-text-small uk-text-soft">
<span uk-icon="icon: comment; ratio: 0.7"></span> Activez les sous-titres via le bouton CC (fichier .vtt externe).
</div>
</div>
</div>
<!-- EXEMPLE 4 : controlslist (nodownload nofullscreen) + poster personnalisé -->
<div>
<div class="uk-card uk-card-custom uk-card-default uk-card-hover uk-border-rounded">
<div class="uk-card-header uk-flex uk-flex-between uk-flex-middle" style="background:#fcfdff; border-bottom: 1px solid #eef2f8;">
<div class="uk-flex uk-flex-middle uk-gap-small">
<span uk-icon="icon: lock; ratio: 1.2" class="uk-text-danger"></span>
<h3 class="uk-card-title uk-margin-remove">Style 4 · UI restreinte</h3>
</div>
<span class="attr-tag">controlslist · crossorigin</span>
</div>
<div class="uk-card-body video-wrapper uk-padding-small">
<video 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.webm" type="video/webm">
</video>
</div>
<div class="uk-card-footer uk-text-small uk-text-soft">
<span uk-icon="icon: ban; ratio: 0.7"></span> Pas de téléchargement, pas de plein écran — Poster haute résolution.
</div>
</div>
</div>
<!-- EXEMPLE 5 : Picture-in-Picture natif + PiP -->
<div>
<div class="uk-card uk-card-custom uk-card-default uk-card-hover uk-border-rounded">
<div class="uk-card-header uk-flex uk-flex-between uk-flex-middle" style="background:#fcfdff; border-bottom: 1px solid #eef2f8;">
<div class="uk-flex uk-flex-middle uk-gap-small">
<span uk-icon="icon: tv; ratio: 1.2" class="uk-text-primary"></span>
<h3 class="uk-card-title uk-margin-remove">Style 5 · Picture-in-Picture</h3>
</div>
<span class="attr-tag">PiP · autoplay muted</span>
</div>
<div class="uk-card-body video-wrapper uk-padding-small">
<video id="pipUikitVideo" 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="uk-card-footer uk-text-small uk-text-soft">
<span uk-icon="icon: picture-in-picture; ratio: 0.7"></span> Bouton natif "Picture in picture" sur Chrome, Edge, Safari. Démarre muet.
</div>
</div>
</div>
</div>
</div>
<!-- Section complète des attributs HTML5 - UIkit Accordéon lumineux -->
<div class="uk-section uk-section-muted-light uk-padding-small" style="background: #fafcff;" id="attributs">
<div class="uk-container uk-container-large">
<div class="uk-card uk-card-default uk-card-body uk-border-rounded" style="background-color: #ffffff; border: 1px solid #eef3fa;">
<div class="uk-flex uk-flex-middle uk-flex-between uk-flex-wrap">
<div>
<h2 class="uk-h3 uk-margin-remove-bottom"><span uk-icon="icon: code; ratio: 1.4" class="uk-text-primary uk-margin-small-right"></span> Tous les attributs de la balise <code><video></code></h2>
<p class="uk-text-muted">Standards HTML Living Document — supportés par tous les navigateurs modernes.</p>
</div>
<div>
<span class="uk-badge" style="background:#eef2ff; color:#14471c;">✨ 5 exemples d'utilisation</span>
</div>
</div>
<hr class="uk-divider-icon">
<div class="uk-grid uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-grid-small" data-uk-grid>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>src</code> — source vidéo</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>controls</code> — affiche l'UI</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>autoplay</code> — lecture auto</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>loop</code> — répétition infinie</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>muted</code> — muet par défaut</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>poster</code> — image avant lecture</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>preload</code> (metadata, auto, none)</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>playsinline</code> (iOS)</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>crossorigin</code> (anonymous/use-credentials)</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>controlslist</code> (nodownload/nofullscreen)</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>disablePictureInPicture</code></div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>disableRemotePlayback</code></div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code><track></code> (subtitles, captions)</div>
<div><span uk-icon="icon: check; ratio: 0.6" class="uk-text-success"></span> <code>height / width</code></div>
</div>
<div class="uk-alert uk-alert-primary uk-margin-medium-top uk-border-rounded" style="background: #f0f7ff; color:#1e466e;">
<p><span uk-icon="icon: info"></span> <strong>À propos de cette démo :</strong> Les cinq exemples ci-dessus exploitent une combinaison unique de ces attributs. Design UIkit — interface claire, tons neutres, cartes lumineuses, animations douces. Aucun background sombre, fidèle au thème jour.</p>
</div>
</div>
</div>
</div>
<!-- Footer UIkit -->
<footer class="uk-section uk-section-xsmall uk-padding-remove-vertical" style="background: #fefefe; border-top: 1px solid #e2e8f0;">
<div class="uk-container uk-container-large uk-text-center uk-padding-small">
<div class="uk-margin-small-top uk-text-xsmall uk-text-muted">
© 2026 — Démonstration des attributs vidéo HTML5 avec UIkit framework.
Vidéos pour un usage éducatif.
</div>
</div>
</footer>
<!-- UIkit JS nécessaire pour les composants UI (accordéon, tooltips, etc.) -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/js/uikit-icons.min.js"></script>
<!-- script custom pour logs, PiP, autoplay fallback -->
<script>
(function() {
// toutes les vidéos de la page
const videos = document.querySelectorAll('video');
videos.forEach((video, idx) => {
video.addEventListener('play', () => console.info(`[UIkit] ▶️ Lecture vidéo ${idx+1}`));
video.addEventListener('pause', () => console.info(`[UIkit] ⏸️ Pause vidéo ${idx+1}`));
video.addEventListener('volumechange', () => {
if(!video.muted && video.volume > 0) console.info(`[UIkit] 🔊 Volume vidéo ${idx+1} : ${video.volume}`);
else if(video.muted) console.info(`[UIkit] 🔇 Vidéo ${idx+1} muette`);
});
if(video.id === 'pipUikitVideo') {
video.addEventListener('enterpictureinpicture', () => console.info('📺 [UIkit] Mode PiP activé (Picture-in-Picture)'));
video.addEventListener('leavepictureinpicture', () => console.info('🖥️ [UIkit] Sortie du mode PiP'));
}
});
// renforcer autoplay pour les vidéos avec attribut autoplay (muted)
const autoPlayVideos = document.querySelectorAll('video[autoplay]');
autoPlayVideos.forEach(vid => {
vid.play().catch(e => console.info("UIkit autoplay (muet) géré silencieusement"));
});
// console.log("✨ UIkit (mode jour) — 5 styles vidéo avec toutes les options HTML5 (controls, loop, poster, PiP, controlslist, track)");
})();
</script>
<!-- Ajustement léger pour rendre les cartes plus cohérentes -->
<style>
.uk-card-custom .uk-card-header {
padding: 0.8rem 1rem;
}
.uk-card-custom .uk-card-body {
padding: 0.8rem;
}
.uk-card-custom .uk-card-footer {
padding: 0.7rem 1rem;
background: #fefefe;
border-top: 1px solid #f0f4f9;
}
.uk-text-soft {
color: #4b5565;
}
code {
background: #edf2f7;
padding: 0.1rem 0.4rem;
border-radius: 12px;
font-size: 0.8rem;
}
.uk-badge-light {
background: #eef2ff;
color: #1e4668;
}
</style>
</body>
</html>
Télécharger le fichier source