A web background video is not a cinema master. It is a short, silent visual layer that must begin quickly, loop cleanly and leave enough bandwidth for the page itself. Uploading the original export to WordPress often produces a file with excessive resolution, bitrate, audio and metadata.
Prepare a separate delivery copy while preserving the source outside the public Media Library.
Define the visual requirement first
Record the largest rendered dimensions, expected crop and loop duration. A 4K file is difficult to justify when the video appears inside a 1,400-pixel-wide hero with a dark overlay.
Trim frames that visitors never see. Prefer a short loop without a visible cut. If the page needs a 40-second narrative, it is probably content video and should have controls rather than behave as a background.
Remove audio from a purely decorative autoplay file. Browsers generally require autoplay media to be muted, and an unused audio track still adds data.
Create a controlled MP4 derivative
FFmpeg can create an H.264 delivery file with broad browser support:
ffmpeg -i hero-master.mov -vf "scale='trunc(min(1600,iw)/2)*2':-2" -c:v libx264 -preset slow -crf 25 -pix_fmt yuv420p -an -movflags +faststart hero-web.mp4This single-line example caps width at 1,600 pixels without enlarging smaller input, rounds width down to an even number and calculates an even height. It assumes ordinary SDR video; HDR or unusual pixel aspect ratios need separate review. The FFmpeg scale documentation explains the expressions.
Keep CRF 25 and the size cap as starting points, then compare visible quality. -pix_fmt yuv420p sets the output pixel format and -an removes audio. Encoding options depend on the installed FFmpeg build. Fast start relocates MP4 metadata; it does not reduce the video bitrate.
Treat these values as a test point, not a universal preset. Fine text, gradients and fast movement can require different settings.
Inspect visual quality at the displayed size
Watch the derivative on an ordinary mobile screen and desktop at the page’s actual crop. Look for blocking in shadows, banding in gradients and stuttering motion.
Background overlays can hide some detail, so encode for the final design rather than judging the raw video full-screen. Export two or three controlled variants and choose the smallest one that still looks intentional.
Keep the original master backed up. Re-encoding the already compressed web copy later will accumulate artefacts.
Prepare the poster separately
Extract or design a representative still image, crop it to the same aspect ratio and compress it through the normal responsive image workflow. The poster should work as the permanent presentation when video does not play.
Do not embed promotional text inside the video or poster if the same message can be real HTML. HTML remains searchable, accessible and editable, and it can adapt at mobile widths.
Give the video container a fixed aspect ratio or suitable minimum height so the poster-to-playback transition does not shift the page.
Verify server support for media delivery
A HEAD response is useful, but it does not prove that a real range request works. Replace this example address with an MP4 you control and request only its first 1,024 bytes. The command writes separate header and sample files; its size and time limits avoid an unbounded download if the server ignores Range. curl.
curl --range 0-1023 --max-filesize 1048576 --max-time 15 -D hero-range-headers.txt -o hero-range-sample.bin "https://example.com/wp-content/uploads/hero-web.mp4"For a sufficiently large file, inspect a 206 response with a matching Content-Range: bytes 0-1023/… and Content-Type: video/mp4. A 200 can mean the range was ignored; 416 means the requested range cannot be satisfied. Do not equate either with a missing MP4. Check the public CDN response used by the page. See MDN range requests and HTTP semantics.
Avoid unnecessary WordPress processing
WordPress does not generate video sizes in the same way it generates image thumbnails. The file you upload is generally the file visitors receive. Prepare it before upload rather than expecting an image optimiser to compress it.
Check hosting upload and post limits, but do not raise them merely to accept an unsuitable master. Large media also increases backups, migrations and disk usage.
For high traffic or a library of content video, object storage or a specialised streaming platform may be more appropriate. A single short background can still be served locally if the server and CDN deliver it correctly.
Integrate it without forcing the download
A poster and playsinline support presentation, while muted autoplay still needs testing on the target browsers. preload="none" is a hint, not a download block: autoplay can start fetching the media. If the design must defer video, keep its source unassigned until the chosen activation condition; CSS hiding alone does not establish that the file was never requested. Check the final Network log. Video attribute reference.
Offer a usable still version for reduced-motion preferences. If movement starts automatically, continues beyond five seconds and runs alongside other content, provide a pause, stop or hide mechanism unless that movement is essential. A short looping file can still keep moving beyond five seconds. W3C pause, stop, hide guidance.
Test the complete page
Test a cold load on mobile data, not just direct playback of the MP4 URL. Confirm the poster appears promptly, the heading remains readable, video starts without blocking the call to action and the loop does not cause high CPU use.
Compare the media bytes with the page’s other critical resources. A successful encode that saves 50% may still be inappropriate if several megabytes transfer before visitors can act.
If media headers, CDN caching, page-builder markup or responsive fallbacks are unclear, request a scoped performance assessment. An initial review needs the public page and source specifications, not hosting passwords.
What a performance assessment should resolve
Send the page URL, device, poster and MP4 sizes, a dated cold-load observation and which element delays the useful content. WebSpeed Optimize can scope the encoding, player markup or delivery work from that evidence. Agree the changes and comparison conditions before intervention; a smaller file alone does not prove improved Core Web Vitals.
Request a video performance assessment · WordPress performance and Core Web Vitals service