Designing Audio & Video

The Craft of Multimedia Masters

Web design isn’t just about making videos and audio play – it’s about making them shine. With CSS, you can give your multimedia elements that special touch: elegant borders, soft shadows, or colors that harmonize with the rest of your design. This way, your media blends seamlessly into the overall aesthetic, like a piece from an artful mosaic.

However, there are limits. Native controls like play and volume buttons offer only minimal customization. If you want full control over the design, creating your own controls with HTML, CSS, and JavaScript is the way to go. This ensures your page is not only functional but also a visual masterpiece – perfectly tailored to your creative vision!

Let’s Keep Going

Styling Audio and Video

Styling Audio and Video

Elegant Multimedia Elements for Your Website

Imagine your videos and audio players as traveling bards – they need a stage that lets them shine. With a touch of CSS, you can give them elegant borders, soft shadows, and the perfect size to ensure their performance dazzles in every browser.

Width and Height: Define player dimensions to fit seamlessly into your layout.
Borders: Add a touch of elegance with stylish frames.
Rounded Corners: Soften the edges for a polished look.
Shadows: Create depth and dimension for a standout appearance.
Background Color: Match the player’s background to your site’s color palette.
Padding and Margin: Add spacing to frame the player and make it visually prominent.
Object-Fit: Particularly useful for videos, ensuring they fit perfectly into their container without distorting the aspect ratio.

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

This example ensures audio and video elements are displayed stylishly, featuring full width, rounded corners, shadows, and a violet background.

In this lesson, you have learned…

How to style audio and video elements with CSS by adding borders, rounded corners, and shadows.
Why defining the width and height of multimedia elements is important to integrate them harmoniously into your layout.
How to use object-fit to ensure that videos fit perfectly into their container without distorting the aspect ratio.
Why creating custom controls with HTML, CSS, and JavaScript is necessary if you want full control over the design of your media players.
How to visually highlight audio and video elements by using padding, margin, and background colors to seamlessly integrate them into your design.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Here you can also see a background video with an overlay, although it uses more advanced CSS. You will understand it better later, but you can already use this code snippet – feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space to tinker!

The Voices of the Forest

In Greenwood Hollow, the wind doesn’t merely tell stories – it sings songs and plays movies! The sounds carry ancient wisdom, and the images move like living memories. But beware, these magical media have a mind of their own. Your mission? Ensure the melodies don’t turn into croaks and the images don’t freeze like cursed windows. With HTML and CSS, you’ll make the forest’s songs resonate and its stories dance – all without setting the magical projector ablaze!

Your Task: Style Audio and Video

Add Audio and Video
Include one audio and one video element, using the following attributes:
controls: um die Steuerung anzuzeigen
• controls: display playback controls.
• loop: ensure the media plays in an endless loop.
• poster (for the video): display an image before playback begins.
• autoplay (optional): use only with the forest’s permission!
Styling with CSS
• Adjust size: Set the width to 90% to make the media responsive.
• Add borders and shadows: Apply a border and shadow to create a three-dimensional effect.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

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">
Your browser doesn’t support the video tag!
</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;
}

Let’s Keep Going