Topic 10 · 10 of 43

Multimedia Elements: Audio, Video and Iframes

All in one: every media element and iframe attribute, side by side

What this example compares

The two media elements: <audio> vs <video>, both paired, with fallback text between the tags
The play bar: controls vs no controls vs controls="false"
Starting by itself: autoplay vs autoplay muted vs autoplay muted loop vs muted alone
How much to fetch early: preload="none" vs "metadata" vs "auto"
Cover picture and size: poster vs width vs width + height
One file or a shortlist: src vs several <source type> vs nothing playable
Timed text: <track kind> subtitles vs captions vs descriptions vs chapters, with srclang, label and default
Picture or window: <img> vs <iframe>, with width/height, width="100%", title, loading="lazy" and a refused site
Rights of the framed page: no sandbox vs sandbox vs sandbox="allow-scripts" vs allow

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see nine panels. Panel 1 shows a beep player, a video player and the fallback message an old browser would show. In panel 2 the first and third videos have a play bar, the second has none and the fourth box is empty. In panel 3 the plain autoplay video usually waits (a browser may let it start because you just clicked Run) while the two muted ones play by themselves, and the last player shows a crossed-out speaker. Panel 4 shows no length for preload="none" (0:00, or 0:00 / 0:00 on a wide screen) and 0:00 / 0:03 for the other two. Panel 5 shows the campus drawing as a cover picture, then the clip at width 140 and inside a taller fixed box. In panel 6 the first two videos and the beep player are ready to play while the third stays grey. In panel 7 all five clips play, but words (“Hello, I am Asha” and “[music] नमस्ते”) appear on the first two only. Panel 8 shows the whole drawing in the picture but only the sky in the frames, and the last frame blank. Panel 9 reads Script RAN, BLOCKED, Script RAN, Script RAN. The Console stays empty: nothing on this page calls console.log.

Quick check: in panel 9, you add sandbox to a working chat widget and it goes dead. Which one word brings it back to life, and what does allow do instead?

sandbox="allow-scripts": an empty sandbox blocks every script, and allow-scripts gives that one right back. allow works the other way round: it adds powers such as fullscreen or camera; it never takes any away.