Member Avatar for kevinyu

How to make an iframe embedded video not skip streaming an audio even if a submit button has been pressed, is it possible to achieve it without using scripts???

Note: I am streaming a YouTube video(hidden)

  • 3 Contributors
  • 6 Replies
  • 131 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gon1387

Dani AI

Generated

A normal form submit navigates the top-level page, which stops any in-page audio. The answers from and point to the two practical ways to avoid that: prevent a top-level navigation or keep the player in a different browsing context. The core choices are a pure-HTML trick that requires no scripting, or a modern JavaScript approach that avoids reloading the page.

A no-JS option is to target the form to a named, hidden iframe so the response loads into that frame while the main page (and its player) stays put. Example structure:

<form action="/submit" method="post" target="hidden_iframe"> ... </form>

<iframe name="hidden_iframe" style="width:0;height:0;border:0;visibility:hidden"></iframe>

Notes: the server response will render inside the iframe (not the parent), so the parent must not rely on that response for UI changes. Avoid using display:none on the iframe in some older browsers; the style above is safer. See the form target attribute docs: form target attribute.

The JavaScript method is more flexible. Submit the form with fetch/XHR and update only the parts of the page that need changing; the audio iframe never reloads. Minimal pattern:

document.querySelector('form').addEventListener('submit', function(e){
  e.preventDefault();
  fetch(this.action, { method: this.method, body: new FormData(this) })
    .then(r => r.text())
    .then(html => document.getElementById('result').innerHTML = html)
    .catch(console.error);
});

Use this for JSON or HTML partials; for file uploads use FormData (fetch supports it). See the Fetch API guide: Using Fetch.

Special note for hidden YouTube players: browser autoplay policies and YouTube embed behaviour can affect playback (autoplay with sound may be blocked). For player control and reliability across interactions, consider the YouTube IFrame Player API: YouTube IFrame Player API.

Tradeoffs: the iframe-target technique is scriptless but limited in interactivity; AJAX is modern and powerful but requires JavaScript and progressive enhancement/fallback handling.

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

No. Without scripts the page will close and open a new one, thus stopping the video.

Member Avatar for kevinyu

What method(s) I am going to do then? Can JavaScript make it possible? :)

Member Avatar for pritaeas

As long as the page does not need to reload completely, you can change parts of it with AJAX.

Member Avatar for gon1387

Unless have your form in an iframe and your audio's in the parent.
Example:

<body>
    ...
    <div>
        ... your audio object here ...
    </div>
    ...
    <iframe>
        <form>
            ...
            <button type="submit"> ... </button>
            ...
        </form>
    </iframe>
    ...
</body>
Edited by gon1387
Member Avatar for kevinyu

Since I'm too busy with my exams, I can't try this until next week. Hehe. Thank you for your help!

Member Avatar for gon1387

LOL. Good luck with your exam. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.