Why does Firefox produce larger WebM video files compared with Chrome?
Because they don't use the same settings...
The webm encoder has a lot of other params than the ones we've got access to from the MediaRecorder.
These params may all have an influence on the output file's size, and are up to implementors to set.
Here are snapshots I took of the videos generated from your updated fiddle [click to enlarge]:
Chrome 1 
Firefox 1 
Chrome 2 
Firefox 2 
I hope you can appreciate the difference of quality, it's about the same as between webp's 0.15 vs 0.8 quality params, and the sizes also reflects these changes.
const supportWebPExport = document.createElement('canvas').toDataURL('image/webp').indexOf('webp') > -1;const mime = supportWebPExport ? 'image/webp' : 'image/jpeg';const img = new Image();img.onload = doit;img.crossOrigin = 'anonymous';img.src = "https://i.imgur.com/gwytj0N.jpg";function doit() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = this.width, canvas.height = this.height; ctx.drawImage(this, 0,0); canvas.toBlob(b => appendToDoc(b, '0.15'), mime, 0.15); canvas.toBlob(b => appendToDoc(b, '0.8'),mime, 0.8);}function appendToDoc(blob, qual) { const p = document.createElement('p'); p.textContent = `quality: ${qual} size: ${blob.size/1000}kb`; p.appendChild(new Image).src = URL.createObjectURL(blob); document.body.appendChild(p);}So yes, that's how it is... One way or the other could be better for your cases, but the best would be that we, web-devs, get access to these parameters. Unfortunately, this is not an easy thing to do from the specs point-of-view...