diff --git a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md
index ebce1811d30..ac733bf309b 100644
--- a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md
+++ b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md
@@ -5,26 +5,42 @@ challengeType: 19
dashedName: what-are-the-roles-of-the-html-audio-and-video-elements
---
-# --description--
+# --interactive--
The `audio` and `video` elements allow you to add sound and video content to your HTML documents. The `audio` element supports popular audio formats like mp3, wav, and ogg.
The `video` element supports mp4, ogg, and webm formats.
-To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file:
+To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file.
+
+As you can see in the preview window, nothing shows up on the page.
+
+:::interactive_editor
```html
-
+
```
-If you try to run this example, you'll see that nothing shows up on the page. However, if you inspect the page with the developer tools, you'll see the `audio` element is indeed on the page. If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute:
+:::
+
+If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute.
+
+Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the `src` value to `"https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3"`.
+
+:::interactive_editor
```html
-
+
```
+:::
+
The `controls` attribute enables users to manage audio playback, including adjusting volume, and pausing, or resuming playback. The `controls` attribute is a boolean attribute that can be added to an element to enable built-in playback controls. If omitted, no controls will be shown.
-Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously. Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down":
+Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously.
+
+Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, scrub the play head close the end of the song and it will restart again once it is finished.
+
+:::interactive_editor
```html
```
-When the song reaches the end, it will loop back around and play it again from the beginning. Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute:
+:::
+
+Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute.
+
+To hear the music, click on the volume icon in the audio player.
+
+:::interactive_editor
```html
```
-When you start the song in the browser, you'll not hear anything. To hear the music you will need to click on the volume icon.
+:::
When it comes to audio file types, there are differences in which browsers support which type. To accommodate this, you can use `source` elements inside the `audio` element and the browser will select the first source that it understands. Here's an example of using multiple `source` elements for an `audio` element:
@@ -59,7 +81,13 @@ When it comes to audio file types, there are differences in which browsers suppo
The browser will first start with the ogg type, and if it can't play the audio, then it'll move down to the next type in the list.
-All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes:
+All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes.
+
+Add the `autoplay` attribute to the opening `video` tag so the video plays automatically.
+
+**NOTE**: The `width` attribute is being used here to make the video smaller and fit better in the preview window. You will learn more about the `width` attribute in future lessons.
+
+:::interactive_editor
```html
```
-For the `src`, or source attribute, we are using a video called "Big Buck Bunny" from archive.org. If you wanted to display an image while the video is downloading, you can use the `poster` attribute. This attribute is not available for `audio` elements and is unique to the `video` element. Here's an example of using the `poster` attribute with content provided by peach.blender.org:
+:::
+
+For the `src`, or source attribute, we are using a video called "Big Buck Bunny" from archive.org. If you wanted to display an image while the video is downloading, you can use the `poster` attribute. This attribute is not available for `audio` elements and is unique to the `video` element. Here's an example of using the `poster` attribute with content provided by peach.blender.org.
```html
```
-This example is also using the `width` attribute to set the width to 620 pixels so the video fits better on the screen.
-
# --questions--
## --text--