Audio & Video

Gestaltungskünste der Multimedia-Meister

Im Webdesign geht es nicht nur darum, Videos und Audios zum Laufen zu bringen – sie sollen auch blendend aussehen. Mit CSS kannst du deinen Multimedia-Elementen das gewisse Etwas verleihen: elegante Rahmen, sanfte Schatten oder Farben, die harmonisch zum Rest deines Designs passen. So fügen sich diese Medien nahtlos in das Gesamtbild ein und wirken, als wären sie Teil eines kunstvollen Mosaiks.

Doch es gibt Grenzen. Die nativen Steuerelemente wie Play- und Lautstärke-Buttons lassen sich nur begrenzt anpassen. Willst du volle Kontrolle über das Design, bleibt nur der Weg über eigene Steuerelemente mit HTML, CSS und JavaScript. So wird deine Seite nicht nur funktional, sondern ein echter Hingucker – perfekt auf deine kreativen Vorstellungen abgestimmt!

Los geht’s

Audio und Video gestalten

Audio und Video gestalten

Stilvolle Multimedia-Elemente für deine Webseite

Stell dir vor, deine Videos und Audios wären wie reisende Barden – sie brauchen eine Bühne, die sie glänzen lässt. Mit einer Prise CSS zauberst du ihnen elegante Rahmen, sanfte Schatten und die perfekte Größe, damit du in jedem Browser ihren Auftritt genießen kannst.

Breite und Höhe: Bestimme die Größe der Player, um sie harmonisch in dein Layout einzupassen.
Rahmen: Verleihe deinen Playern mit stilvollen Rahmen Eleganz.
Abgerundete Ecken: Füge eine sanfte Rundung hinzu.
Schatten: Erzeuge Tiefe und Dimension durch Schatten.
Hintergrundfarbe: Passe die Hintergrundfarbe an, um die Player in die Farbpalette deiner Webseite zu integrieren.
Padding und Margin: Bestimme Abstände, um Platz um den Player zu schaffen und ihn visuell hervorzuheben.
object-fit: Besonders nützlich bei Videos, um das Video optimal in seinen Container einzupassen, ohne das Seitenverhältnis zu verzerren.

audio,
video {
    width: 100%;
    border: 5px solid #333;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000004d;
    background-color:
        purple;
    padding: 1rem;
}

Dieses Beispiel sorgt dafür, dass Audio- und Video-Elemente in voller Breite mit abgerundeten Ecken, Schatten und violettem Hintergrund stilvoll angezeigt werden.

In dieser Lektion hast du gelernt…

Wie du Audio- und Video-Elemente mit CSS stilvoll gestaltest, indem du Rahmen, abgerundete Ecken und Schatten hinzufügst.
Warum die Breite und Höhe der Multimedia-Elemente wichtig sind, um sie harmonisch in dein Layout einzupassen.
Wie du mit object-fit sicherstellst, dass Videos perfekt in ihren Container passen, ohne das Seitenverhältnis zu verzerren.
Warum eigene Steuerelemente mit HTML, CSS und JavaScript nötig sind, wenn du volle Kontrolle über das Design deiner Media-Player haben willst.
Wie du Audio- und Video-Elemente optisch hervorhebst, indem du mit padding, margin und Hintergrundfarben spielst, um sie nahtlos in dein Design zu integrieren.

Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

Hier siehst du zusätzlich ein Hintergrundvideo mit Overlay, das allerdings fortgeschrittenes CSS enthält. Das wirst du später besser verstehen, kannst aber schon dieses Codesnippet verwenden – fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!

Die Stimmen des Waldes

In Greenwood Hollow erzählt der Wind nicht einfach Geschichten – nein, er singt Lieder und spielt Filme! Die Klänge tragen uralte Weisheiten, und die Bilder bewegen sich wie lebendige Erinnerungen. Doch Vorsicht, diese magischen Medien haben ihren eigenen Kopf. Deine Aufgabe? Sorge dafür, dass der Gesang nicht zum Krächzen wird und die Bilder nicht wie verwunschene Fenster hängenbleiben. Mit HTML und CSS bringst du die Lieder des Waldes zum Klingen und die Geschichten zum Tanzen – ohne, dass der magische Projektor Feuer fängt!

Deine Aufgabe: gestalte Audio und Video

Audio und Video hinzufügen:
Setze ein Audio- und ein Videoelement ein.
Verwende dafür die folgenden Attribute:
controls: um die Steuerung anzuzeigen
loop: damit das Medium sich endlos wiederholt
poster (für das Video): ein Bild, das angezeigt wird, bevor das Video abgespielt wird
autoplay (optional): Achtung! Nur verwenden, wenn es die Erlaubnis des Waldes hat!
Gestaltung mit CSS:
Größe anpassen: Setze die Breite auf 90%, damit sie sich dem Bildschirm anpassen.
Rand und Schatten: Füge einen Rahmen und Schatten hinzu, um einen dreidimensionalen Effekt zu erzeugen.

Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!

Editor in neuem Tab öffnen

HTML

<audio src="assets/media/snow-tree.mp3" type="audio/mpeg" controls loop></audio>
<video src="assets/media/yggdrasil.mp4" type="video/mp4" controls loop poster="assets/img/yggdrasil.jpg">
Dein Browser unterstützt das Video-Tag nicht.
</video>

CSS

audio,
video {
    box-sizing: border-box;
    max-width: 100%;
    border: 2px solid #333;
    border-radius: 30px;
    box-shadow: 0 4px 8px #0000009c;
    margin: 2rem 0;
}

Weiter geht’s