Member Avatar for Amnesiac11

I've embedded a video using

<code><iframe src="HS Website Video Final 8-01-12.mp4" style="height: 232px; width: 534px" class="auto-style15" /></iframe></code>

How do I keep it from starting automatically?

Edited by Amnesiac11 because: typo
  • 2 Contributors
  • 4 Replies
  • 212 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by Amnesiac11

Dani AI

Generated

Short answer: stop embedding the raw .mp4 inside an <iframe> and use the HTML5 <video> element without an autoplay attribute — the <video> element will not auto-start unless autoplay is present or a script calls play(). Modern browsers additionally block autoplay of audible media by default (muted autoplay is allowed more often). (developer.mozilla.org)

As already moved to <video> and suggested a workaround, the remaining problem (Firefox not playing) is almost always caused by one of three things: codec/platform support, server headers or byte-range support, or the file being loaded from the wrong location. Firefox’s MP4/H.264 playback depends on the operating system’s codecs; on some systems a WebM/OGG fallback is required. Servers must send the correct Content-Type (e.g. video/mp4, video/webm) and support HTTP range requests (206 / Accept-Ranges) for progressive playback and seeking. Inspect the file URL directly in the browser and the Network/Console tabs to see 404s, MIME mismatches or missing 206 responses. (devdoc.net)

Quick, practical checklist (apply before considering a player workaround):

  • Serve the files over HTTP(S) from the same origin (or set CORS).
  • Confirm the direct file URL opens in a browser tab and that Network shows Content-Type: video/mp4 and Accept-Ranges: bytes / 206 Partial Content.
  • Provide at least two formats (WebM first for Firefox, MP4 H.264 for Safari/Edge).
  • If re-encoding is needed, use ffmpeg with a streaming-friendly mp4: 
    ffmpeg -i input.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4
ffmpeg -i input.mov -c:v libvpx-vp9 -c:a libopus output.webm

    A minimal, defensive HTML example:

    <video controls preload="metadata" playsinline width="640" height="360">
<source src="/videos/clip.webm" type="video/webm">
<source src="/videos/clip.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<script>
// defensive: stop any unexpected autoplay
window.addEventListener('DOMContentLoaded', ()=>{ const v=document.querySelector('video'); if(v) v.pause(); });
</script>

If autoplay still appears with an iframe, it’s because the browser is loading the raw media document or a player is forcing play() — migrating fully to <video> plus the checks above is the correct fix. (developer.mozilla.org)

Recommended Answers

All 4 Replies

Member Avatar for Amnesiac11

Thanks for the response however, it does not work. I'm not linking to YouYube.

Member Avatar for Amnesiac11

I got rid of the iframe tag and replaced it with the video tag. Like so...

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" ></source>
  <source src="movie.ogg" type="video/ogg" ></source>
  <source src="movie.webm" type="video/webm" ></source>
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object> 
</video>

However, it does not work in Firefox.

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.