The <audio> tag allows us to play music or podcasts. CSS controls its width and external spacing.
audio {
width: 100%;
margin-top: 20px;
}
💡 Note: Most browser audio players have fixed heights that cannot be changed via CSS.
PREVIEW (BROWSER DEFAULT):
Iframes embed external content. We must set width and height to ensure they don't look like tiny windows.
iframe {
width: 100%;
height: 300px;
}
Commonly used for:
• YouTube Videos
• Google Maps
• External Dashboards
By default, iframes often have a subtle border. Use CSS to either remove it or make it a professional frame.
iframe {
border: 4px solid #ec4899;
border-radius: 15px;
}
Combining Audio and Iframe for a multimedia section.
/* Professional Look */
audio, iframe {
width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}
iframe {
height: 250px;
border: 1px solid #444;
}