101 commands · 7 cheat sheets · HTML
Media and Embedding master quick reference
Browse 101 commands from 7 focused cheat sheets on page 1 of 1. Each example opens its matching detailed section.
Media and Embedding · 15 commands
Fullscreen and Picture-in-Picture API Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Enter fullscreen | await panel.requestFullscreen() | View examples |
| Prefer hidden browser UI | await panel.requestFullscreen({ navigationUI: 'hide' }) | View examples |
| Exit fullscreen | await document.exitFullscreen() | View examples |
| Read active element | const active = document.fullscreenElement | View examples |
| Check availability | if (document.fullscreenEnabled) enableButton() | View examples |
| Observe state change | document.addEventListener('fullscreenchange', syncFullscreenUI) | View examples |
| Observe request errors | panel.addEventListener('fullscreenerror', reportFailure) | View examples |
| Style the fullscreen element | .viewer:fullscreen { inline-size: 100%; block-size: 100%; } | View examples |
| Style fullscreen backdrop | .viewer::backdrop { background: #000; } | View examples |
| Delegate both features | <iframe
src="/player"
allow="fullscreen; picture-in-picture">
</iframe> | View examples |
| Enter video PiP | const pipWindow = await video.requestPictureInPicture() | View examples |
| Exit video PiP | await document.exitPictureInPicture() | View examples |
| Read active PiP video | const active = document.pictureInPictureElement | View examples |
| Observe PiP entry | video.addEventListener('enterpictureinpicture', syncPipUI) | View examples |
| Discourage video PiP | <video controls disablepictureinpicture></video> | View examples |
Media and Embedding · 17 commands
HTML Audio and Video Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed controlled video | <video controls width="960" height="540" src="demo.mp4">
</video> | View examples |
| Embed controlled audio | <audio controls src="episode.mp3"></audio> | View examples |
| Show a poster image | <video controls poster="poster.jpg" src="demo.mp4">
</video> | View examples |
| Offer alternate formats | <source src="demo.webm" type="video/webm"> | View examples |
| Provide legacy fallback content | <video controls>
<a href="demo.mp4">Download the video</a>
</video> | View examples |
| Add captions | <track
kind="captions"
src="captions-en.vtt"
srclang="en"
label="English"
default> | View examples |
| Add translated subtitles | <track
kind="subtitles"
src="subtitles-pt.vtt"
srclang="pt-BR"
label="Português"> | View examples |
| Link a transcript | <a href="transcript.html">Read the transcript</a> | View examples |
| Hint metadata loading | <video controls preload="metadata" src="demo.mp4">
</video> | View examples |
| Defer media loading | <audio controls preload="none" src="episode.mp3">
</audio> | View examples |
| Request inline playback | <video controls playsinline src="demo.mp4"></video> | View examples |
| Request muted autoplay | <video autoplay muted playsinline src="ambient.mp4">
</video> | View examples |
| Size video responsively | video { max-inline-size: 100%; block-size: auto; } | View examples |
| Reserve media space | video { aspect-ratio: 16 / 9; inline-size: 100%; } | View examples |
| Pause with JavaScript | document.querySelector('video').pause(); | View examples |
| Request playback | await video.play(); | View examples |
| Seek to a time | video.currentTime = 30; | View examples |
Media and Embedding · 11 commands
HTML Canvas and Inline SVG Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Declare a canvas | <canvas id="chart" width="640" height="360">
Chart data is listed below.
</canvas> | View examples |
| Get a 2D context | const context = canvas.getContext('2d') | View examples |
| Clear the bitmap | context.clearRect(0, 0, canvas.width, canvas.height) | View examples |
| Draw a filled rectangle | context.fillRect(20, 20, 120, 60) | View examples |
| Scale for device pixels | canvas.width = Math.round(cssWidth * devicePixelRatio) | View examples |
| Declare responsive SVG | <svg
viewBox="0 0 100 100"
role="img"
aria-labelledby="title">
<title id="title">Chart</title>
</svg> | View examples |
| Draw a circle | <circle cx="50" cy="50" r="40" fill="steelblue" /> | View examples |
| Draw an SVG path | <path d="M10 90 L50 10 L90 90 Z" /> | View examples |
| Hide decorative SVG | <svg aria-hidden="true" focusable="false">...</svg> | View examples |
| Caption a graphic | <figure>
<svg role="img">...</svg>
<figcaption>Quarterly revenue.</figcaption>
</figure> | View examples |
| Inherit text color | <path fill="currentColor" d="..." /> | View examples |
Media and Embedding · 15 commands
HTML iframes Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed a page | <iframe src="/preview" title="Document preview">
</iframe> | View examples |
| Reserve space | <iframe
src="/chart"
title="Sales chart"
width="800"
height="450">
</iframe> | View examples |
| Fit the container | iframe { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; } | View examples |
| Defer off-screen loading | <iframe loading="lazy" src="/map" title="Office map">
</iframe> | View examples |
| Limit referrer data | <iframe
referrerpolicy="strict-origin"
src="https://example.com"
title="Example">
</iframe> | View examples |
| Apply all sandbox restrictions | <iframe
sandbox
src="/untrusted"
title="Untrusted preview">
</iframe> | View examples |
| Allow scripts only | <iframe
sandbox="allow-scripts"
src="https://widgets.example"
title="Widget">
</iframe> | View examples |
| Allow form submission | <iframe
sandbox="allow-forms"
src="/survey"
title="Survey">
</iframe> | View examples |
| Allow fullscreen | <iframe
allow="fullscreen"
src="/player"
title="Video player">
</iframe> | View examples |
| Deny camera and microphone | <iframe
allow="camera 'none'; microphone 'none'"
src="/widget"
title="Widget">
</iframe> | View examples |
| Embed inline HTML | <iframe srcdoc="<p>Preview</p>" title="Inline preview">
</iframe> | View examples |
| Name a navigation target | <iframe name="report" title="Generated report"></iframe> | View examples |
| Open a link in a frame | <a href="/report" target="report">Load report</a> | View examples |
| Send a cross-window message | frame.contentWindow.postMessage({ type: 'ready' }, 'https://widget.example') | View examples |
| Validate a received message | if (event.origin !== 'https://widget.example') return | View examples |
Media and Embedding · 15 commands
HTML Responsive Images Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Embed an image | <img
src="team.jpg"
alt="The product team in the studio"> | View examples |
| Hide a decorative image | <img src="divider.svg" alt=""> | View examples |
| Reserve image space | <img
src="portrait.jpg"
alt="Ada Lovelace"
width="800"
height="1000"> | View examples |
| Lazy-load an image | <img
src="gallery-4.jpg"
alt="Mountain lake at sunrise"
loading="lazy"
width="1200"
height="800"> | View examples |
| Request async decoding | <img
src="chart.png"
alt="Quarterly revenue increased each month"
decoding="async"
width="960"
height="540"> | View examples |
| Prioritize a key image | <img
src="hero.jpg"
alt="Developer workspace"
fetchpriority="high"
width="1600"
height="900"> | View examples |
| Offer density variants | <img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x"
alt="Northwind"
width="240"
height="80"> | View examples |
| Offer width variants | <img
src="trail-800.jpg"
srcset="trail-480.jpg 480w, trail-800.jpg 800w, trail-1280.jpg 1280w"
alt="Forest trail"> | View examples |
| Describe the image slot | <img
src="trail-800.jpg"
srcset="trail-480.jpg 480w, trail-800.jpg 800w, trail-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Forest trail"> | View examples |
| Offer a modern format | <picture>
<source srcset="portrait.avif" type="image/avif">
<img src="portrait.jpg" alt="Ada at her desk">
</picture> | View examples |
| Offer several formats | <picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="City skyline">
</picture> | View examples |
| Change the crop | <picture>
<source
media="(max-width: 600px)"
srcset="speaker-close.jpg">
<img
src="speaker-wide.jpg"
alt="Speaker presenting on stage">
</picture> | View examples |
| Combine media and widths | <picture>
<source
media="(min-width: 900px)"
srcset="banner-1200.jpg 1200w, banner-1800.jpg 1800w"
sizes="80vw">
<img src="banner-720.jpg" alt="Conference attendees">
</picture> | View examples |
| Caption an image | <figure>
<img
src="diagram.svg"
alt="Request flow from browser to server">
<figcaption>Figure 1: Request lifecycle</figcaption>
</figure> | View examples |
| Label an image link | <a href="/reports/">
<img
src="report-cover.jpg"
alt="Open the annual report">
</a> | View examples |
Media and Embedding · 14 commands
Media Capture and Screen Sharing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Request camera and microphone | const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) | View examples |
| Prefer a video size | video: { width: { ideal: 1280 }, height: { ideal: 720 } } | View examples |
| Require a facing mode | await track.applyConstraints({ facingMode: { exact: 'environment' } }) | View examples |
| Inspect active settings | const settings = track.getSettings() | View examples |
| Detect constraint names | const supported = navigator.mediaDevices.getSupportedConstraints() | View examples |
| List media devices | const devices = await navigator.mediaDevices.enumerateDevices() | View examples |
| Watch device changes | navigator.mediaDevices.addEventListener('devicechange', refreshDevices) | View examples |
| Prompt for a display surface | const display = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) | View examples |
| Delegate display capture | <iframe
src="https://tools.example"
allow="display-capture">
</iframe> | View examples |
| Mute outgoing media | track.enabled = false | View examples |
| Release a source | stream.getTracks().forEach(track => track.stop()) | View examples |
| Handle external termination | track.addEventListener('ended', handleShareEnded, { once: true }) | View examples |
| Record supported media | const recorder = new MediaRecorder(stream, { mimeType }) | View examples |
| Preview captured media | video.srcObject = stream; await video.play() | View examples |
Media and Embedding · 14 commands
Web Audio API Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create an audio context | const context = new AudioContext({ latencyHint: 'interactive' }) | View examples |
| Resume after user activation | await context.resume() | View examples |
| Release the context | await context.close() | View examples |
| Connect a media element | const source = context.createMediaElementSource(audioElement) | View examples |
| Play an AudioBuffer | const source = new AudioBufferSourceNode(context, { buffer }); source.start() | View examples |
| Decode fetched audio | const buffer = await context.decodeAudioData(await response.arrayBuffer()) | View examples |
| Control level | const gain = new GainNode(context, { gain: 0.5 }) | View examples |
| Connect graph nodes | source.connect(gain).connect(context.destination) | View examples |
| Remove graph routing | source.disconnect() | View examples |
| Schedule a gain ramp | gain.gain.linearRampToValueAtTime(1, context.currentTime + 0.2) | View examples |
| Replace future automation | gain.gain.cancelAndHoldAtTime(context.currentTime) | View examples |
| Read waveform samples | analyser.getFloatTimeDomainData(samples) | View examples |
| Load an audio worklet module | await context.audioWorklet.addModule('/audio/meter-processor.js') | View examples |
| Message a processor | node.port.postMessage({ type: 'reset' }) | View examples |