Media Card
Carte vidéo qui se range en vignette au-dessus du titre dans une colonne étroite, puis place la vignette à gauche et révèle la description dès 280 px.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.fx-0751-root sert de conteneur de requête (container: mdc-card / inline-size) et occupe toute la largeur de son parent. Dans la forme de départ, .mdc-card empile une vignette .mdc-thumb de 80 px de haut (dégradé cyan → violet), le titre et une ligne de méta (vues, ancienneté). La vignette porte un rond sombre avec un triangle de lecture au centre et la durée en bas à droite, dans .mdc-duration.
À partir de 280 px de conteneur, la règle @container mdc-card (min-width: 280px) met la carte en rangée alignée en haut : la vignette prend 140 × 90 px à gauche, le texte s'étend à droite et le paragraphe .mdc-desc, caché jusque-là, s'affiche sous la méta. Deux états, pas d'intermédiaire.
Le rond de lecture est un dessin : la carte ne lit aucune vidéo et ne contient pas d'élément <video>. Pour l'ouvrir, entourez le titre (ou la carte) d'un lien vers votre page de lecture. Les transitions de 0,3 s sur la carte et la vignette adoucissent le changement de forme.
Accessibilité
- Pas de faux bouton : le rond « lecture » est marqué
aria-hidden="true"et ne prend pas le focus, puisqu'il ne déclenche rien. Le lien réel, à ajouter sur le titre, sera la seule cible au clavier. - Durée lisible :
3:42est un vrai texte, lu par les lecteurs d'écran (souvent « 3 deux-points 42 »). Pour une lecture plus claire, doublez-le d'un texte masqué à l'œil (« 3 minutes 42 ») et placezaria-hidden="true"sur la forme courte ; unaria-labelsur cespanserait ignoré par la plupart des lecteurs d'écran. - Description conditionnelle : sous 280 px,
.mdc-descest endisplay: noneet n'est pas annoncée ; n'y mettez rien d'indispensable. - Mouvement réduit : les transitions sont retirées sous
prefers-reduced-motion: reduce, la carte change de forme sans animation.
Compatibilité navigateur
Requêtes de conteneur, flexbox et SVG en ligne. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : bascule entre 260 et 300 px, comme prévu à 280 px, sans débordement à 390 px.
Navigateur sans @container : la carte reste en vignette au-dessus du titre et la description n'apparaît jamais.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0751-root">
<div class="mdc-card">
<div class="mdc-thumb">
<div class="mdc-play" aria-hidden="true"><svg viewBox="0 0 24 24">…</svg></div>
<span class="mdc-duration">3:42</span>
</div>
<div class="mdc-body">
<h4>Titre de la vidéo</h4>
<span class="mdc-meta">12k vues · 2 jours</span>
<p class="mdc-desc">Description</p>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Palier (CSS — @container mdc-card (min-width: 280px)) |
280 px | Passez à 360 px si vos titres sont longs : la vignette à gauche leur laisse alors assez de place. |
Vignette (CSS ou HTML — .mdc-thumb) |
Dégradé #06b6d4 → #8b5cf6, 80 px de haut |
Mettez l'image de la vidéo en style="background-image:url(…)" (recadrage cover déjà prévu). |
Taille de la vignette en ligne (CSS — .mdc-thumb dans le palier) |
140 × 90 px | 160 × 90 px pour un vrai 16:9, 96 × 54 px pour une liste compacte. |
Durée (HTML — .mdc-duration) |
3:42 |
Supprimez la balise pour un direct, ou remplacez le texte par « EN DIRECT ». |
| Lien de lecture (HTML) | Aucun | Entourez le contenu du h4 d'un <a href="…"> vers votre page vidéo. |
Couleurs de texte (CSS — .mdc-meta, .mdc-desc) |
Blanc à 55 % | Sur un fond clair, utilisez un gris foncé (#475569) pour garder le contraste. |
FAQ
.fx-0751-root pour chaque vidéo. Comme chacune mesure sa propre largeur, une liste dans une colonne étroite reste en vignettes et la même liste dans une colonne large passe en lignes.display: none de la règle .mdc-desc.
