Member Avatar for OdinSmasher

Hi all; a very strange request maybe, I am looking for a way to override the internal error within Firefox that displays the grey box and the text no video with supported format

I am aware I can add extra videos to cover me and the browser will run through the stack, but I want to display a picture of Google Chrome and a link the download link in the attempt the urge people to jump ship (umm how nasty of me!) I have inculded the code below if you want to observe the error as I said the 'does not support' text is what I want to display not the standard internal error!

HELP!!

<!DOCTYPE HTML>
<html>
  <head>
    <title> example title </title>
  </head>
  <body>
    <video src="clip.mp4">
    does not support
    </video>
  </body>
</html>
  • 2 Contributors
  • 1 Reply
  • 274 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by fheppell

Dani AI

Generated

Quick answer (agreeing with ): the grey “No video with supported format and MIME type found” box is rendered by the browser itself — fallback text inside a <video> tag is only shown when the browser does not support the element at all, not when it supports <video> but none of the sources can be played. The browser’s UI/overlay is user‑agent controlled and cannot be reliably replaced with HTML/CSS alone. (developer.mozilla.org)

Practical fix (what to do instead): detect support in script and show your own fallback block (an image + download link) outside the <video> element, or swap it in when playback errors happen. Use canPlayType() (or the newer MediaCapabilities API) before showing the player, and listen for the media error event at runtime to cover network/encoding failures. Example pattern:

<!-- HTML -->
<div id="wrap">
  <video id="player" controls poster="/img/poster.jpg">
    <source src="/video.webm" type="video/webm; codecs=vp8,vorbis">
    <source src="/video.mp4"  type="video/mp4;  codecs=avc1.42E01E,mp4a.40.2">
  </video>

  <div id="fallback" style="display:none">
    <img src="/chrome.png" alt="Use Chrome">
    <a href="https://www.google.com/chrome/">Download Chrome</a>
  </div>
</div>

<script>
const v = document.getElementById('player');
const fb = document.getElementById('fallback');

function hasSupport() {
  return v.canPlayType('video/webm; codecs="vp8,vorbis"') ||
         v.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
}

if (!hasSupport()) { v.style.display='none'; fb.style.display='block'; }

v.addEventListener('error', () => { v.style.display='none'; fb.style.display='block'; });
</script>

canPlayType() and the error event are standard ways to detect format support and runtime load/decode failures; MediaCapabilities gives even better detection on modern browsers. (developer.mozilla.org)

Other important notes: always offer multiple encoded sources (WebM, MP4, Ogg) and make sure the server sends correct MIME types — a wrong Content-Type will make Firefox refuse playback even if the file is valid. Also, if you prefer not to roll your own UI, libraries like Video.js provide a customizable error overlay and built‑in fallbacks. (developer.mozilla.org)

Summary: you cannot change Firefox’s internal overlay with CSS/inner fallback, but you can detect lack of support and swap in your own image/link UI with a small JS check + error handler — that gives the UX you want without relying on browser internals.

Member Avatar for fheppell

This is down to individual browsers, you can't really do that unfortunatley

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.