I have page with an iframe with allow="autoplay" and in the iframe, and audio element with the autoplay property. The user interacts with the parent page which loads the iframe src. I would expect the audio in the iframe to auto play since we have user interaction, and it in fact does in Chrome and Safari on MacOS, Windows, and Android but not on any iOS device, Safari or Chrome. Here's an example:
Parent
<html lang="en">
<head>
<script>
function loadIframe() {
const iframe = document.querySelector('iframe');
iframe.src = 'iframe.html';
}
</script>
</head>
<body>
<iframe src="" allow="autoplay"></iframe>
<button onClick="loadIframe()">Load Iframe</button>
</body>
</html>
iframe.html
<html lang="en">
<head></head>
<body>
<audio src="test.mp3" autoplay></audio>
</body>
</html>
[update] I swear when I wrote this it worked in safari desktop, but now it doesn't :( Still works in every other browser.
I have page with an iframe with allow="autoplay" and in the iframe, and audio element with the autoplay property. The user interacts with the parent page which loads the iframe src. I would expect the audio in the iframe to auto play since we have user interaction, and it in fact does in Chrome and Safari on MacOS, Windows, and Android but not on any iOS device, Safari or Chrome. Here's an example:
Parent
<html lang="en">
<head>
<script>
function loadIframe() {
const iframe = document.querySelector('iframe');
iframe.src = 'iframe.html';
}
</script>
</head>
<body>
<iframe src="" allow="autoplay"></iframe>
<button onClick="loadIframe()">Load Iframe</button>
</body>
</html>
iframe.html
<html lang="en">
<head></head>
<body>
<audio src="test.mp3" autoplay></audio>
</body>
</html>
[update] I swear when I wrote this it worked in safari desktop, but now it doesn't :( Still works in every other browser.
Share Improve this question edited 2 days ago Rooster242 asked 2 days ago Rooster242Rooster242 9163 gold badges11 silver badges19 bronze badges1 Answer
Reset to default 0Use playsinline along with autoplay on iframe src as such:
<audio src="test.mp3" autoplay playsinline></audio>
citation: HTML5 Video autoplay on iPhone