How to embed a video on a website
Copy one iframe, understand the six attributes it carries, and add the query parameters that control autoplay, mute, start time and looping.
Paste the video's iframe embed code where you want the player to appear. Keep the allow and allowfullscreen attributes, so fullscreen and picture-in-picture work. Add query parameters such as ?autoplay=1&muted=1 or ?t=90 to change how playback starts.
Embedding a video means placing a host's player inside your page. The host keeps the file, encodes it and sends the stream. Your page gives it a box and a few rules for how that box behaves. On VideoBB those rules fit in one iframe tag. Once you know what each part does, you can use it in any CMS, static site or hand-written page in a minute.
This guide goes through the code one attribute at a time. It shows how the query parameters combine. It also covers the details people often learn the hard way. You will see how to save space so the page does not jump, how to name the frame for screen readers, and which attributes are safe to remove. Sizing, autoplay and captions each get a deeper guide in the player and embedding hub. Here the goal is a working embed you understand.
The embed code
Every VideoBB video you own has an embed code that looks like this, with VIDEO_ID replaced by the video's identifier and the title filled in:
<iframe src="https://videobb.com/embed/VIDEO_ID" width="640" height="360" allowfullscreen allow="autoplay; fullscreen; picture-in-picture" loading="lazy" title="..."></iframe>
It is a single element with no script tag, no stylesheet and no dependency on your page's JavaScript. That is deliberate. Every CMS, forum and web publishing tool has had to support iframes for two decades. An iframe also keeps the player apart from whatever else runs on the page. The embed guide shows where to copy the code from. Owners can also switch embedding off for a single video, as the embedding help page explains. The rest of this article explains what you are pasting.
What each attribute does
Six attributes, each with a job. Only two of them are there for looks.
| Attribute | What it does | Change it? |
|---|---|---|
src | Loads the player page for one video. Query parameters are appended after the ID. | Only the parameters |
width, height | Set the default size and reserve space before the frame loads. 640×360 is 16:9. | Yes, but keep the ratio or override it in CSS |
allowfullscreen | The older way to permit fullscreen. Some browsers still read it, so it stays. | Keep it |
allow | Permissions Policy grants: autoplay, fullscreen and picture-in-picture are allowed inside the frame. | Delete a token to disable that feature |
loading="lazy" | Defers loading the frame until it approaches the viewport. | Remove for a player at the very top of the page |
title | Names the frame for assistive technology. | Yes, describe the video |
Embedding, step by step
Copy the code
Take the iframe from the video's embed option. Do not retype it; the
allowstring is easy to get subtly wrong.Paste it as raw HTML
Use a block or field that accepts HTML rather than the visual editor, which may convert the angle brackets into text or strip the tag entirely.
Write the title
Replace the placeholder with a short description such as "Product walkthrough, 4 minutes". Screen readers announce it when a user reaches the frame.
Decide how it should size
Leave the defaults for a quick test, then apply the CSS from the responsive embeds guide so the player fills its column on phones.
Test in two browsers and one phone
Check that fullscreen works, that the page does not shift when the frame appears, and that autoplay behaves as you expect on a device that has never visited videobb.com.
Where to paste it in common systems
In WordPress, use the Custom HTML block in the block editor, or the Text tab of the Classic editor. The visual tab will not keep an iframe. Squarespace and Wix both provide code or embed blocks that accept raw HTML. Static site generators generally pass inline HTML through from Markdown. Hugo is the exception: its default Markdown renderer needs the unsafe option turned on before it will render raw HTML. In React, write the tag as JSX and spell the attribute allowFullScreen. If a system refuses the tag, the cause is almost always an HTML sanitiser that strips iframes by default. The fix is a permission setting rather than a plugin.
Parameters that change playback
Playback options are passed as query parameters on the src. Append the first with a question mark and any further ones with ampersands: https://videobb.com/embed/VIDEO_ID?autoplay=1&muted=1&t=90. The player reads them when it loads, so changing them means changing the embed code, not the video.
autoplay=1 asks the player to start as soon as it can. Browsers block autoplay with sound until a viewer has interacted with the site. So pair it with muted=1, or it will often be refused. t=90 starts playback ninety seconds in. That is the right way to link to a moment in a long recording. loop=1 restarts the video when it ends. It suits short silent clips and background visuals, but it is irritating on anything with speech.
Parameter cheat sheet
| Parameter | Effect | Notes |
|---|---|---|
?autoplay=1 | Start playback on load | Combine with muted=1 or expect browsers to block it |
?muted=1 | Start with sound off | Viewers can unmute from the controls |
?t=90 | Start at 90 seconds | Any whole number of seconds |
?loop=1 | Repeat when finished | Best for short clips without speech |
Reserve the space before the player loads
The width and height attributes do more than set a size. They tell the browser how much room to hold while the frame is still loading. Delete them without replacing them in CSS, and the content below the player will jump when it appears. That jump is measured as Cumulative Layout Shift, and it counts against your page in Google's page experience signals.
The cleanest approach is to keep the attributes and add width: 100%; height: auto; aspect-ratio: 16 / 9 to the iframe in CSS. The reserved box then scales with the column. Lazy loading, which the default code turns on, is safe for a player below the fold. For a hero video at the top of the page, remove loading="lazy" so the browser fetches it at once.
Mistakes that break embeds
Most embed problems trace back to one of these.
- Adding a
sandboxattribute. It disables scripts inside the frame unless you list the right tokens, and the player is a script. Leave it off. - Removing
allowto tidy the code, then wondering why picture-in-picture and fullscreen no longer work. - Pasting into a visual editor that converts the tag to plain text. Use an HTML block.
- Serving your page over HTTP with an HTTPS embed, or the reverse. Mixed-content rules will block or downgrade the frame; serve everything over HTTPS.
- Setting
height: 100%on the iframe without a parent that has a height, which collapses the player to nothing. - Embedding a video set to private. Only viewers who can access the video will see it; use unlisted for embed-only content.
- Embedding a phone clip that plays sideways. CSS cannot fix the picture inside the frame. Fix the file with the free rotate tool and upload the corrected copy.
Privacy, search and what the embed cannot do
Privacy is set per video on VideoBB. Public videos appear in the site's own listings. Unlisted videos play anywhere they are embedded but are not listed. Private videos are for viewers you choose. Unlisted is the usual choice for course material or a client review. It stays out of listings but still works on your page.
An embed on its own gives search engines very little. If the video is central to the page, add VideoObject structured data with the embed URL, a thumbnail and a description. Then list the page in a video sitemap. If you need to control playback from your own code, load analytics, or build a custom interface, that is API territory: see the developer documentation. And if the debate is whether to embed from a host at all versus serving files yourself, self-hosting versus a platform lays out the trade-offs.
Frequently asked questions
Can I embed the same video on more than one page?
Yes. The embed code is not tied to a page or domain, so the same iframe can appear on as many pages as you like. Each page loads the player independently and streams the same renditions. If you want different start points on different pages, change the t parameter in each copy rather than uploading the video again.
Why is picture-in-picture greyed out in my embed?
Picture-in-picture inside a cross-origin iframe requires the frame to be granted that feature through the allow attribute. If picture-in-picture is missing from the allow string, or the attribute was removed, the browser withholds the feature. Restore the default allow value and the control will return. Note that some browsers also offer their own picture-in-picture toggle independently of the player.
Does lazy loading delay the video for viewers?
Only until the frame approaches the viewport. For a player below the fold, lazy loading means the browser does not spend bandwidth on it until the viewer scrolls near, which makes the rest of the page faster. For a player visible on first paint, remove loading="lazy" so the frame is fetched with the rest of the page and playback can begin without a pause.
Can I link to a specific moment in a video?
Yes. Add ?t= followed by the number of seconds to the embed src, so t=90 starts at one minute thirty. Combine it with other parameters using an ampersand. This is useful for referencing a section of a lecture or a demonstration from a specific page without editing the video.
Sources
- MDN: <iframe> element — Reference for src, allow, allowfullscreen, loading, sandbox and title.
- MDN: Permissions Policy — How the allow attribute delegates features such as autoplay to an iframe.
- web.dev: Cumulative Layout Shift — Why reserved space for embeds matters.
- Google Search Central: Video structured data — VideoObject markup for pages with embedded video.
Related guides
Responsive video embeds
Fixed 640×360 frames crop on phones and float in wide columns. Two lines of CSS fix it for good, and there is a fallback for older stacks.
Autoplay rules in browsers
Chrome, Safari and Firefox all block autoplay with sound until a person has interacted. What each one allows, how the rules reach an iframe, and how to design around them.
Video hosting vs YouTube
YouTube is a video host, an audience and an advertising business at once. A dedicated host is only the first of those. Here is how to decide which combination you actually want.