Short video can make a blog post clearer and more engaging. A ten-second clip can show a setting, a product or a process faster than three paragraphs. But video is also one of the heaviest things you can put on a page. Added carelessly, it makes pages slow, burns mobile data and can hurt the reading experience you were trying to improve.
This guide covers the practical decisions: where to host the clip, how to embed it, how to keep the page fast and how to make it accessible. It applies to any blogging platform, from a hosted service to a self-managed site.
First, ask whether the post needs video
A video earns its place when it shows something text and images cannot: movement, sequence, scale or a before-and-after. Examples include a short screen recording of a settings menu, a product being rotated, or a step in a recipe or repair.
If the clip is decorative, consider a still image instead. It loads faster and will not distract from your words.
Choose where the video lives
You have two main options.
Option 1: Embed from a video platform
Pasting a link from a large video platform is the simplest approach. The platform handles encoding, streaming and different devices. The trade-offs: the embed loads extra scripts from another site, the player carries the platform’s branding and related-video suggestions may appear when the clip ends.
Option 2: Host the file yourself
For a short clip, you can upload an MP4 file and use the HTML video element. This gives you control over appearance and avoids third-party scripts. The trade-off: you pay for storage and bandwidth, and you must prepare the file well so it plays everywhere.
For a handful of short clips, either option 1 or option 2 is usually enough. For autoplaying, looping, silent illustrations, self-hosting a small, well-compressed file is often the neatest choice.
Prepare the file
If you host the clip yourself, preparation matters more than anything else on this list.
- Trim it. Keep only the seconds that matter. Every second you cut makes the file smaller.
- Pick sensible dimensions. A clip that appears in a column about 700 pixels wide does not need to be 4K. Export at a size close to how it will display, with a little headroom for high-density screens.
- Use a widely supported format. MP4 with H.264 video and AAC audio plays on nearly every browser and device.
- Compress. Use your editor’s export presets, or a free encoder, and aim for the smallest file that still looks good at the displayed size. Check the result by eye.
- Make it start fast. Many encoders have an option to move the file’s metadata to the start, often called “fast start” or “web optimised”. This lets playback begin before the entire file has downloaded.
- Remove the audio track if the clip has no sound. It saves a little space and avoids unexpected noise.
Embed it properly
If you self-host, the HTML video element offers several useful attributes. Here is a sensible starting point:
<video controls preload="none" poster="clip-poster.jpg" width="700" height="394">
<source src="clip.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
What the key parts do:
- controls shows play, pause and volume controls. Keep them unless the clip is a short silent loop.
- preload=”none” tells the browser not to download the video until the visitor presses play. That keeps the initial page load light.
- poster shows a still image before playback. Choose a clear frame, because it is the first thing readers see and it can carry the whole page if the video never plays.
- width and height reserve space for the player so the page does not jump around while loading.
For silent illustrative loops, you can add autoplay, muted, loop and playsinline. Browsers generally only allow autoplay when the video is muted. Use it sparingly, and never on clips that contain important information readers might miss.
For videos hosted on another site, you can ask the browser to delay loading the embedded player until it is near the screen by adding loading="lazy" to the iframe. Alternatively, show a poster image with a play button, and load the real player only after a click. This keeps third-party scripts off the page until a reader actually wants the video.
Place it thoughtfully
- Put it where it helps. Place the clip right after the paragraph that introduces it, not at the very top just because it is eye-catching.
- Do not hide key information in video alone. Some readers cannot play it, and search engines read text better than footage.
Make it accessible
A clip that only some readers can use is not finished.
- Add captions if there is speech or meaningful sound.
- Write a short text summary beneath the video describing what it shows.
- Avoid flashing effects.
- Check the controls work by keyboard. Tab to the player and try to play and pause without a mouse.
Test before you publish
Run through this list on a real phone, not just your laptop:
- Does the page load quickly before the video is touched?
- Does the poster image look right?
- Does the video play on your phone’s connection?
- Does anything jump around as the page loads?
- Are captions readable?
If you want a measurement, free browser tools can report load time and layout shifts. Use them to compare the page before and after adding the clip, and adjust file size or loading settings if the difference is large.
If you make clips with AI tools
Some bloggers create short clips with video tools that generate or restyle footage from a source clip. The delivery advice is the same: trim, compress, add a poster and captions. One extra point: if a clip was made or changed with AI, say so in a caption or note near the video. Readers appreciate knowing what they are watching.
Quick checklist
- The clip shows something text and images cannot.
- It is trimmed, compressed and in MP4.
- It has a poster image and reserved dimensions.
- It does not load until needed, unless it is a short silent loop.
- It has captions and a text summary.
- You have tested it on a phone.
A good embedded video feels like part of the post. It loads when it should, stays out of the way when it should and gives the reader something words could not.
Author name: Genjutsu Team
Author bio: Genjutsu Team builds Genjutsu (https://genjutsu.app), a browser-based video-to-video AI tool for creators and small brands, and writes practical guides on AI video.