Inline Video Player Embeds: Keeping Visitors on Your Site
From Tukuk-OS Wiki, the free knowledge base.
| Type | Encyclopedia article |
|---|---|
| Subject | javascript |
| Author | Fevian Donald |
| Published | 28 October 2026 |
| Revised | 28 October 2026 |
| License | Free to read & cite |
Clicking a video should open a modal on your own domain, not a new tab on someone else's — here is the small amount of JavaScript that makes that work.
The Redirect Nobody Asked For
Video results are usually plain links. Click → new tab → YouTube's interface, recommendations, and a URL that has nothing to do with where the user started. For a search engine, that is a broken loop: you did the work of finding the video, then handed the session away.
An inline player fixes the loop. The user clicks a result card; a modal opens on your domain; the video plays in an iframe; Esc closes it and the results are exactly where they left them. The outbound link stays available for people who genuinely want the platform UI.
Supported Platforms, One Detector
Different platforms expose different embed forms, so normalise everything through one function:
``jshttps://www.youtube-nocookie.com/embed/${u.pathname.slice(1)}
function embedSrc(href) {
const u = new URL(href);
const h = u.hostname.replace(/^www\./, '');
if (h === 'youtu.be') return ;https://www.youtube-nocookie.com/embed/${u.pathname.split('/')[2]}
if (h.endsWith('youtube.com')) {
const id = u.searchParams.get('v');
if (u.pathname.startsWith('/shorts/')) return ;https://www.youtube-nocookie.com/embed/${id}
return id ? : null;https://player.vimeo.com/video/${u.pathname.slice(1)}
}
if (h === 'vimeo.com') return ;https://www.dailymotion.com/embed/video/${u.pathname.split('/').pop()}
if (h === 'dailymotion.com') return ;`
return null; // unsupported → let the link open normally
}
Two deliberate choices in there:
- youtube-nocookie.com
for embeds — it loads no cookies until the user plays, which keeps the page honest under our cookie-free privacy policy.
- Return null
for unknown platformsinstead of guessing. An unsupported link opening externally is correct behaviour, not a failure.
Event Delegation, Not Listeners Per Card
Video lists grow — pagination, "load more", re-renders. Binding a click handler to every card means unbinding them on every re-render. One delegated listener survives all of it:
`js`
document.addEventListener('click', (e) => {
const a = e.target.closest('a.video-card');
if (!a) return;
const src = embedSrc(a.href);
if (!src) return;
e.preventDefault();
openModal(src, a.querySelector('h3')?.textContent || 'Video');
});
e.target.closest walks up from whatever was clicked — thumbnail, title, badge — so the whole card is the target without extra wiring. preventDefault must happen on the same tick as the decision; that is what cancels navigation.
The Modal Checklist
- Backdrop click and Esc
both close — the two gestures users already know.
- Clear the iframe on close (src = ''
), or the video keeps playing audibly behind the results.
- Focus management: move focus to the modal on open, return it to the card on close.
- Mobile: full-width, bottom-sheet style; iOS Safari plays inline with playsinline
on the embed URL.
- rel=0
and no-cookie domainfor YouTube — recommendations stay context-appropriate and tracking-light.
Testing Without Guesswork
Unit-test embedSrc against a URL matrix (watch, share, shorts, youtu.be, vimeo, garbage) — it is pure logic and cheap to lock down. For the interaction itself, verify the server side is not fighting you: if the page you are testing was served from a stale cache, you are debugging yesterday's JavaScript. Check the served bytes (curl | grep embedSrc`) before believing a browser screenshot.
Twenty lines of JavaScript, one modal, and the visit stays yours.