Mute/unmute iframe video from another domain
Question:
I’ve implemented an iframe inside my webpage, the iframe points to another domain to catch the video content.
Nothing fancy inside my webpage, the iframe is standard aswell:
<iframe id='frame' src='domain.com/stream/324/index.m3u8' width='100%' allow='autoplay; encrypted media' frameborder='0' allowfullscreen></iframe>
I would like to add buttons outside the iframe to mute or unmute the video, even though the presence of the player’s controllers.
How can I achieve this?
Answers:
Don’t use the <iframe> tag for videos. Instead, use the HTML5 <video> tag. With a <video> tag you can set the muted attribute. You can rewrite your <iframe> like this:
<video id="video" controls width="100%" src="domain.com/stream/324/index.m3u8"></video>
You can then create a button and add an event listener to mute and unmute the <video> tag. Like this:
<button onclick="document.getElementById('video').muted = true">Mute</button>
<button onclick="document.getElementById('video').muted = false">Unmute</button>
I’ve implemented an iframe inside my webpage, the iframe points to another domain to catch the video content.
Nothing fancy inside my webpage, the iframe is standard aswell:
<iframe id='frame' src='domain.com/stream/324/index.m3u8' width='100%' allow='autoplay; encrypted media' frameborder='0' allowfullscreen></iframe>
I would like to add buttons outside the iframe to mute or unmute the video, even though the presence of the player’s controllers.
How can I achieve this?
Don’t use the <iframe> tag for videos. Instead, use the HTML5 <video> tag. With a <video> tag you can set the muted attribute. You can rewrite your <iframe> like this:
<video id="video" controls width="100%" src="domain.com/stream/324/index.m3u8"></video>
You can then create a button and add an event listener to mute and unmute the <video> tag. Like this:
<button onclick="document.getElementById('video').muted = true">Mute</button>
<button onclick="document.getElementById('video').muted = false">Unmute</button>