Inhalt / Figuren & Medien
Figuren und Medien in FWT
Medienbereiche bestehen oft nicht nur aus einem Bild. Häufig kommen Video, Audio, eingebettete Inhalte, Beschreibungen, Hinweise oder kombinierte Bild-Text-Bausteine dazu.
FWT trennt deshalb einfache Bildklassen von allgemeineren Medienmustern. Bilder werden unter Inhalt → Bilder behandelt. Diese Seite zeigt Medienboxen, Video, Audio, Medienkarten, Media Objects und externe Medienhinweise.
Medien sollen gut aussehen, aber auch verständlich, barrierearm und
datenschutzfreundlich eingebunden werden.
Medienbox
Medienbox mit Inhalt
Eine Medienbox fasst ein Medium und erklärenden Text zusammen. Sie ist praktisch für Videos, Bilder, Vorschauen oder eingebettete Inhalte mit Beschreibung.
Live-Beispiel
Medienbox
Eine Medienbox fasst Bild, Video oder Embed mit erklärendem Inhalt sauber zusammen.
Kurzer Hinweis oder Bild-/Medienbeschreibung.
HTML-Code anzeigen
<div class="fwt-media-box">
<div class="fwt-ratio fwt-ratio-16x9">
<img class="fwt-img-cover" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Medien%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Medienbausteine%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Mediengrafik">
</div>
<div class="fwt-media-box-body">
<h3>Medienbox</h3>
<p>
Eine Medienbox fasst Bild, Video oder Embed mit erklärendem Inhalt
sauber zusammen.
</p>
<p class="fwt-media-caption">
Kurzer Hinweis oder Bild-/Medienbeschreibung.
</p>
</div>
</div>Video / Embed
Videos und eingebettete Inhalte
Videos, iframes und externe Einbettungen brauchen eine saubere Hülle, feste Seitenverhältnisse und klare Beschriftung.
Live-Beispiel
HTML-Code anzeigen
<figure class="fwt-media-box">
<div class="fwt-ratio fwt-ratio-16x9">
<video class="fwt-video" controls preload="metadata">
<source src="pages/inhalt/medien/Train_to_nowhere_2026.mp4" type="video/mp4">
Dein Browser unterstützt dieses Video nicht.
</video>
</div>
<figcaption class="fwt-media-caption fwt-media-box-body">
Demo-Video zur Verfügung gestellt durch
<a class="fwt-link" href="https://ampyred.de" target="_blank" rel="noopener noreferrer">
AMPYRED Nordhessen
</a>.
Vielen Dank für die Unterstützung.
</figcaption>
</figure>
Externe iframes sollten nicht unbedacht geladen werden. Für YouTube,
Karten oder Social-Media-Embeds ist ein Datenschutz-Hinweis sinnvoll.
Audio
Audio-Baustein
Audio kann für Podcasts, Sprachbeispiele, Musik oder kurze Hinweise genutzt werden. Die native Browsersteuerung bleibt erhalten.
Live-Beispiel
Demo-Audio zur Verfügung gestellt durch AMPYRED Nordhessen . Vielen Dank für die Unterstützung.
HTML-Code anzeigen
<div class="fwt-audio-box">
<p class="fwt-text">
Demo-Audio zur Verfügung gestellt durch
<a class="fwt-link" href="https://ampyred.de" target="_blank" rel="noopener noreferrer">
AMPYRED Nordhessen
</a>.
Vielen Dank für die Unterstützung.
</p>
<audio class="fwt-audio" controls preload="metadata">
<source src="pages/inhalt/medien/Wonderland.mp3" type="audio/mpeg">
Dein Browser unterstützt dieses Audio-Element nicht.
</audio>
</div>Medienkarte
Medienkarte
Eine Medienkarte eignet sich für Videos, Podcast-Hinweise, Projektvorschauen, Lerninhalte oder eingebettete Inhalte mit kurzer Beschreibung.
Live-Beispiel
Medienkarte
Für Videos, Podcast-Hinweise, Projektvorschauen oder eingebettete Inhalte.
HTML-Code anzeigen
<article class="fwt-media-card">
<div class="fwt-media-card-media">
<div class="fwt-ratio fwt-ratio-16x9">
<img class="fwt-img-cover" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Medien%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Medienbausteine%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Mediengrafik als Kartenbild">
</div>
</div>
<div class="fwt-media-card-body">
<h3 class="fwt-media-card-title">Medienkarte</h3>
<p class="fwt-media-card-text">
Für Videos, Podcast-Hinweise, Projektvorschauen oder eingebettete Inhalte.
</p>
</div>
</article>Media Object
Media Object: Bild oder Icon mit Text
Das Media Object kombiniert ein kleines Bild, Icon oder Avatar mit Text. Das ist nützlich für Kommentare, Ansprechpartner, Supporteinträge, kleine News oder Featurelisten.
Live-Beispiel
Media Object
Das Media Object eignet sich für Ansprechpartner, Kommentare, kleine News, Supporteinträge oder Featurelisten.
HTML-Code anzeigen
<div class="fwt-media-object">
<div class="fwt-media-object-media">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Medien%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Medienbausteine%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Kleine abstrakte FWT-Mediengrafik">
</div>
<div class="fwt-media-object-body">
<h3 class="fwt-media-object-title">Media Object</h3>
<p>
Das Media Object eignet sich für Ansprechpartner, Kommentare,
kleine News, Supporteinträge oder Featurelisten.
</p>
</div>
</div>Medienliste
Medienliste
Medienlisten eignen sich für mehrere Einträge mit Bild und Text, zum Beispiel News, Supporteinträge, Downloads oder kleine Projektlisten.
Live-Beispiel
Erster Medieneintrag
Kurzer Beschreibungstext für eine Medienliste.
Zweiter Medieneintrag
Eine weichere Variante für ruhigere Listenbereiche.
HTML-Code anzeigen
<div class="fwt-media-list">
<article class="fwt-media-list-item">
<div class="fwt-media-object">
<div class="fwt-media-object-media">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Medien%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Medienbausteine%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Medienlistengrafik 1">
</div>
<div class="fwt-media-object-body">
<h3 class="fwt-media-object-title">Erster Medieneintrag</h3>
<p>Kurzer Beschreibungstext für eine Medienliste.</p>
</div>
</div>
</article>
<article class="fwt-media-list-item fwt-media-list-item-soft">
<div class="fwt-media-object">
<div class="fwt-media-object-media">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Medien%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Medienbausteine%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Medienlistengrafik 2">
</div>
<div class="fwt-media-object-body">
<h3 class="fwt-media-object-title">Zweiter Medieneintrag</h3>
<p>Eine weichere Variante für ruhigere Listenbereiche.</p>
</div>
</div>
</article>
</div>Externe Medien
Datenschutzfreundlicher Medienplatzhalter
Externe Medien wie Videos, Karten oder Social-Media-Embeds sollten nicht automatisch geladen werden, wenn dadurch Daten an Dritte übertragen werden. Ein Platzhalter mit klarer Erklärung ist oft die bessere Lösung.
Live-Beispiel
HTML-Code anzeigen
<div
class="fwt-media-consent"
data-fwt-media-consent="video"
data-fwt-video-src="pages/inhalt/medien/Train_to_nowhere_2026.mp4"
data-fwt-video-type="video/mp4"
>
<h3 class="fwt-media-consent-title">
Externes Medium nicht automatisch geladen
</h3>
<p class="fwt-media-consent-text">
Dieses Beispiel zeigt das Prinzip: Ein Video wird erst nach einer bewussten
Aktion geladen. Das Demo-Video wurde von AMPYRED Nordhessen zur Verfügung gestellt.
Vielen Dank für die Unterstützung.
</p>
<button class="fwt-table-action" type="button" data-fwt-media-load>
Demo-Video laden
</button>
<noscript>
<p class="fwt-media-consent-text">
JavaScript ist deaktiviert. Das Medium kann deshalb nicht automatisch
nachgeladen werden.
</p>
</noscript>
</div>
In diesem Beispiel wird ein lokales Demo-Video erst nach Klick geladen.
In echten Projekten kann dasselbe Prinzip später für YouTube, Karten
oder andere externe Medien genutzt werden.
Barrierefreiheit
Medien richtig verwenden
Videos beschriften
Eingebettete Videos und iframes brauchen einen verständlichen
title.
<iframe title="Erklärvideo zur Terminbuchung"></iframe>
Alt-Texte nutzen
Bilder in Medienobjekten brauchen sinnvolle Alt-Texte, wenn sie Inhalt tragen.
<img src="person.jpg" alt="Ansprechpartnerin Frau Müller">
Audio nicht erzwingen
Audio und Video sollten nicht automatisch starten.
<audio controls>...</audio>
Kontrast prüfen
Text über Medien oder in Medienboxen muss ausreichend lesbar bleiben.
<div class="fwt-media-consent">...</div>
Externe Dienste erklären
Bei externen Medien sollte klar sein, warum etwas geladen wird und von welchem Anbieter.
<div class="fwt-media-consent">Externes Medium laden</div>
Keine Medienflut
Zu viele eingebettete Medien machen Seiten langsam und unruhig.
Medien gezielt einsetzen