Media

the Media-element dient zur Display verschiedener Medieninhalte how images, Videos and Audioelemente. it bietet einheitliche Styling-Optionen and responsive customizations for multimediale contents.

Installation

the Media-element ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-elements */
@import '@casoon/ui-lib/ui.css';

/* or only the Media-Components */
@import '@casoon/ui-lib/media.css';

Basic Usage

images

<img class="media" src="path/to/image.jpg" alt="Description des Bildes">

Videos

<video class="media" controls>
  <source src="path/to/video.mp4" type="video/mp4">
  her Browser unterstutzt no Videowiedergabe.
</video>

Video-Player (Example)

Audio

<audio class="media" controls>
  <source src="path/to/audio.mp3" type="audio/mp3">
  her Browser unterstutzt no Audiowiedergabe.
</audio>

Audio-Player (Example)

Variants

responsive images

with verschiedenen Bildquellen for unterschiedliche Bildschirmgrossen:

<picture>
  <source media="(min-width: 1200px)" srcset="path/to/large.jpg">
  <source media="(min-width: 768px)" srcset="path/to/medium.jpg">
  <img class="media" src="path/to/small.jpg" alt="Responsives image">
</picture>

Bildverhaltnis-containers

containers, the the Seitenverhaltnis beibehalten:

<div class="media-containers ratio-16-9">
  <img src="path/to/image.jpg" alt="image with festem Seitenverhaltnis">
</div>

Abgerundete Medien

<img class="media rounded" src="path/to/image.jpg" alt="Abgerundetes image">

Kreisformige Medien

<img class="media circle" src="path/to/image.jpg" alt="Kreisformiges image">

with shadow

<img class="media shadow" src="path/to/image.jpg" alt="image with shadow">

with border

<img class="media bordered" src="path/to/image.jpg" alt="image with border">

with Bildunterschrift

<figure class="media-figure">
  <img class="media" src="path/to/image.jpg" alt="image with Bildunterschrift">
  <figcaption>Description des Bildes or Urheberrechtshinweis</figcaption>
</figure>

Description des Bildes or Urheberrechtshinweis

Medien-Galerie

<div class="media-gallery">
  <img class="media" src="path/to/image1.jpg" alt="image 1">
  <img class="media" src="path/to/image2.jpg" alt="image 2">
  <img class="media" src="path/to/image3.jpg" alt="image 3">
  <img class="media" src="path/to/image4.jpg" alt="image 4">
</div>

Customization

the Media-elements can over CSS Variables angepasst become:

:root {
  /* Grundlegende Media-properties */
  --media-max-width: 100%;
  --media-border-radius: var(--radius-md);
  --media-margin: 0;
  
  /* Spezialisierte Media-Variants */
  --media-rounded-radius: var(--radius-lg);
  --media-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --media-border-color: var(--color-gray-200);
  --media-border-width: 1px;
  
  /* containers and Figuren */
  --media-figure-margin: var(--space-4) 0;
  --media-caption-color: var(--color-gray-600);
  --media-caption-font-size: var(--font-size-sm);
  --media-caption-margin: var(--space-2) 0 0;
  
  /* Galerien */
  --media-gallery-gap: var(--space-2);
  --media-gallery-columns: 2;
}

Accessibility

• Verwende immer a aussagekraftiges alt-attributes for images
• Fuge Untertitel and Beschreibungen for Video- and Audioelemente hinzu
• Stelle sicher, that Steuerungen for Video- and Audioelemente with the Tastatur bedienbar sind
• Verwende the loading="lazy"-attributes for images, um the Ladezeit to verbessern
• Nutze the picture-element and responsive Quellen for bessere Performance

Browser-Kompatibilitat

the Media-element ist with allen modernen Browsern kompatibel.

Function	Chrome	Firefox	Safari	Edge
Grundlegende Bilddarstellung	✅	✅	✅	✅
Video- and Audio-elements	✅	✅	✅	✅
Picture-element	✅	✅	✅	✅
Aspect-Ratio-containers	✅	✅	✅	✅
Lazy Loading	✅	✅	✅	✅
CSS Variables	49+	31+	9.1+	15+