Embed Generator

Paste a video, animation, or image link below and get the correctly formatted snippet to drop into your Show Me The Physics pages — videos and animations lazy-load the same way as your fixed pages, and images get a fallback so a broken link never leaves a blank gap.

Visible Title — optional, adds an <h2> heading above the video YouTube link — any format works (youtu.be, youtube.com/watch, embed link, or just the video ID) Accessibility Title — for screen readers, doesn't show on screen

Video will load when this section opens

Paste this where the video should appear

Heads up: this snippet only works on a page that already has the video placeholder CSS and the loadVideosIn() script — check the "One-Time Page Setup" tab if you're not sure your page has it yet.

Visible Title — optional, adds an <h2> heading above the animation Animation / simulation URL

Accessibility Title — for screen readers

Max height — defaults to what's used everywhere else

Paste this where the animation should appear

Heads up: this uses the same lazy-iframe / data-src pattern already on your pages — it only needs the small lazy-load script block to already be in the page's showSection() function (see "One-Time Page Setup").

Visible Title — optional, adds an <h2> heading above the image Image path or URL — e.g. images/image14.png or a full https:// link Alt text — describes the image for screen readers, and doubles as the fallback label if the image fails to load

Fallback width — only used if the image fails to load

Fallback height

Preview

Paste this where the image should appear

Heads up: images aren't lazy-loaded behind a click the way videos and animations are — loading="lazy" just tells the browser to defer offscreen images automatically, which is all they need since they're much lighter. If the image link ever breaks, the onerror fallback swaps in a placeholder with your alt text instead of a broken-image icon.

If you're starting a brand-new page (or double-checking an old one), these are the three pieces that make lazy-loading work. Most of your existing pages already have all three.

1. CSS — video placeholder styling

Goes once in your <style> block.

2. JavaScript — video loader function

Goes once inside your existing DOMContentLoaded script, alongside your other helper functions.

3. JavaScript — call it when a tab opens

Goes inside your showSection() function, right after the section is shown (next to your existing lazy-iframe loading code, if you have one).

4. CSS — image container (most pages already have this)

Wraps images with consistent spacing. Skip this if your page already has an .img-container rule.

Rule of thumb: anything that isn't visible the instant the page loads — a video in a tab the student hasn't clicked yet, an animation lower on the page — should sit behind a placeholder like this rather than loading immediately. That's the one habit that keeps these pages fast.