Audio and Video On The Web

Points:

Due By:

March 3, 2026 at 8:00:00 PM

Overview

In this exercise, we will incorporate video and audio on a website.

Please download the following files from Dropbox to begin:

https://www.dropbox.com/scl/fo/4qy84u7ipf5xe1ifraemx/ACABpaQYGY1DL8FgsGWEEAM?rlkey=25ur9xgdz61fh5zqiv1aekd3p&st=fjq5pmrq&dl=0

You will have a variety of file types to work with, including:

Video
- .mp4, .mov, .webm,
Audio
- .mp3, .wav

I have also included an image that you will use as a poster frame

Starting Code

Our example is very simple today.

Starting HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Media Hub</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="container">
        <h1>Interactive Media Lab</h1>

        </div>

</body>
</html>

Starting CSS

body { 
    font-family: 'Segoe UI', sans-serif; 
    background: #f0f2f5; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 40px; 
}
.container { 
    background: white; 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    max-width: 700px;
    width: 100%; 
}

h1 { 
    color: #333; 
    text-align: center; 
}

.media-section { 
    margin-bottom: 40px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px; 
}

h2 { 
    color: #555; 
    font-size: 1.2rem; 
}


video, audio { 
    width: 100%; 
    margin-top: 10px; 
    border-radius: 8px; 
}


.transcript { 
    background: #f9f9f9; 
    padding: 15px; 
    border-left: 4px solid #007bff; 
    margin-top: 10px; font-size: 0.9rem; 
}

We will be working along a slide presentation to make our site responsive, load fast, and be accessible.

Locked Message