The muted attribute is a boolean attribute for <audio> and <video> elements. When present, it silences the media's audio output by default when the page loads. It's essential for enabling autoplay, as browsers block autoplay with sound.

muted

Step 2

The most common use of muted is with autoplay. Modern browsers block videos from autoplaying with sound, but allow muted autoplay. This enables background videos, hero sections, and other autoplay scenarios without disrupting users.

<video controls autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Step 3

Best practices: Always include controls so users can unmute if desired. Use muted for decorative background videos or when audio isn't essential initially. Don't force muted content if audio is critical to the experience.

<video controls autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
</video>

Step 4

In the browser, muted media plays silently by default. Users can unmute using the controls. This provides a better user experience by preventing unexpected audio while still allowing autoplay functionality.

<video controls autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Step 5

Checkpoint: Which elements support the muted attribute?

<video muted>
  <source src="video.mp4">
</video>

Step 6

Correct! The muted attribute is supported by both <audio> and <video> elements. It silences the audio output by default, enabling autoplay functionality.

<video muted>
  <source src="video.mp4">
</video>

Step 7

Now it's your turn. The muted attribute enables autoplay and improves user experience. Complete the challenges below to master the muted attribute!

muted.html

1 / 7

🔇

Tutor:The muted attribute is a boolean attribute for <audio> and <video> elements. When present, it silences the media's audio output by default when the page loads. It's essential for enabling autoplay, as browsers block autoplay with sound.

⭐ 0 EXP

Muted Mastery

Unlock nodes by learning muted attribute and autoplay.

Concept 1: The Muted Attribute

The muted attribute is a boolean attribute for <audio> and <video> elements. When present, it silences the media's audio output by default when the page loads. It's essential for enabling autoplay, as browsers block autoplay with sound.

System Check

Which elements support the muted attribute?

Only <audio>Only <video><audio> and <video>All HTML elements

Community Holo-Net

Share Muted Media Strategies

Created effective muted autoplay implementations? Share your code and UX best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Understanding the HTML muted Attribute

Pascual Vila

Frontend Instructor.

The muted attribute is a boolean attribute for <audio> and <video> elements. When present, it silences the media's audio output by default when the page loads. It is essential for enabling autoplay, as modern web browsers block autoplay behavior if sound is enabled.

Enabling Autoplay Properly

The most common use of the muted attribute is in conjunction with the autoplay property. Modern browsers enforce policies that block videos from autoplaying with sound to prevent poor user experiences. However, they allow muted autoplay. This mechanism enables background videos, hero sections, and other automated visual scenarios without disrupting users.

Implementation Best Practices

When using this tag, always include controls so users have the option to unmute the media if they choose to engage with the audio. Use muted primarily for decorative background videos or when audio is not essential initially. You should never force muted content if audio is a critical part of the user journey. Also, be aware that browser autoplay policies evolve over time.

Enhancing User Experience (UX)

Muted media plays silently by default, keeping the interface calm and respectful. Giving users the power to unmute using standard controls provides a superior user experience, preventing unexpected audio blasts while still delivering dynamic autoplay functionality.

Muted Attribute Glossary

muted Attribute: Boolean attribute for <audio> and <video> elements that silences audio output by default. Essential for enabling autoplay functionality, as browsers block autoplay with sound.
Autoplay Policy: Browser policy that blocks media from autoplaying with sound to prevent disruptive user experiences. Muted autoplay is generally allowed, enabling background videos and hero sections.
Controls Attribute: Attribute that displays media controls (play, pause, volume, etc.). Always include controls with muted media so users can unmute if desired.
Boolean Attribute: HTML attribute that doesn't require a value. Simply including the attribute name (e.g., muted) sets it to true. Omitting it sets it to false.
User Experience: The overall experience users have when interacting with a website. Muted autoplay improves UX by preventing unexpected audio while enabling background media functionality.

📖 INDEX