Discussion on: 🎮 CSS Nintendo Switch (Box Shadow & Gradient Practice)

[jsdawson]

Wow, great work! The video wouldn't play (Chrome) until I added the muted="muted" attribute value to the <video>.

[Tee]

Thank you very much! Thank you for sharing the bug as well. I just patched it on CodePen with the muted attribute. The audio worked when I added the playsinline attribute (I don't feel the audio is necessary. I was just curious lol).

I looked into it further. It turns out Chrome updated their autoplay policy for UX improvements:

...web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks.

Another interesting tidbit is Chrome uses a Media Engagement Index (MEI), which is the ratio of visits to media playback events emitted, to determine if a video should play automatically. That's why autoplay still works on sites like YouTube, Instagram, etc. Pretty neat!

I'll add this snippet in the code so that ACNH fans can enjoy the intro audio if they wish.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>