[Feat]: YouTube iframe Hover Auto-Mute/Unmute

[alidgn]

Feature Request: YouTube iframe Hover Auto-Mute/Unmute

Summary

When multiple YouTube iframes are embedded on the same page, all videos are muted by default. Currently the user has to manually unmute each one. It would be a better UX if hovering over an iframe automatically unmuted it, while keeping all others muted.

Note: My current userscript implementation only handles YouTube iframes (youtube.com and youtube-nocookie.com). If other embed providers are used on the page, they would need separate handling.

Motivation

I ran into this and worked around it with a Tampermonkey userscript. The script sends mute / unMute commands via the YouTube IFrame API postMessage on mouseenter / mouseleave. It works reliably for both youtube.com and youtube-nocookie.com embeds.

I'm not submitting the userscript itself as a contribution — I think this belongs in the project natively. Happy to share the userscript if it would be helpful as a reference.

Demo: https://youtu.be/8s8gfyVR2dk

Proposed Behavior

• All YouTube iframes start muted (already the case)
• When the user hovers over an iframe, it unmutes after a short delay (~150 ms)
• When the cursor moves to another iframe, the previous one is muted and the new one is unmuted
• Newly added iframes (dynamic/SPA) are handled automatically

Implementation Notes

• Add enablejsapi=1 to the iframe src at render time (required for postMessage API to work)
• Use the YouTube IFrame API postMessage command (mute / unMute) to control audio — no direct DOM access needed, works for cross-origin embeds
• Send postMessage to '*' to cover both youtube.com and youtube-nocookie.com domains
• Use MutationObserver if iframes can be added dynamically

[mertskaplan]

Thank you for your detailed suggestion. I was thinking of changing the media player. I plan to add your suggestion to the new version so that it applies to all videos.