Member Avatar for mmcdonald

Hi all,

I have been looking into making a website that has a timelapse video as its background, something similar to: http://www.thecowisgonemoo.com/nervaq/index-video.html

The question is - how does one set a video as the background of a website!? Some of these timelapse videos are 100's of MBs or even 1000's! Is there any off-the-bat advice from the DW community?

Thank you,
Michael

  • 2 Contributors
  • 2 Replies
  • 91 Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by mmcdonald

Dani AI

Generated

asked about timelapse backgrounds and pointed toward “low res” — both are on the right track. Background video is strictly a UX/performance tradeoff: keep clips short, looped, and highly compressed; provide fallbacks; and only load the video where it actually improves the page (desktop/fast connections). Also be aware of autoplay rules (muted required) and mobile quirks.

A practical pattern that works across browsers is a small looped file in WebM + MP4, a poster image, and the usual attributes (autoplay muted loop playsinline). Example HTML/CSS (minimal):

<video class="bg-video" autoplay muted loop playsinline preload="metadata" poster="/img/poster.jpg" aria-hidden="true">
<source src="/media/bg.webm" type="video/webm">
<source src="/media/bg.mp4" type="video/mp4">
</video>

.bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

Autoplay and video attributes explained: see the MDN video element and browser autoplay guidance at .

Encoding tips (keep experimenting until size/quality balance is right). A starting FFmpeg workflow:

ffmpeg -i input.mov -vf "scale=-2:480,fps=24" -c:v libx264 -preset slow -crf 23 -movflags +faststart -an out.mp4
ffmpeg -i out.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 out.webm

Use a short loop (5–10s), lower frame rate (15–24fps for timelapse), and -movflags +faststart for progressive download.

Accessibility/performance cautions: hide or remove decorative video for users who prefer reduced motion (use @media (prefers-reduced-motion: reduce)), add a clear poster/fallback, and consider injecting the <video> element via JS only for desktop or good connections. For more on respecting reduced-motion preferences see MDN prefers-reduced-motion.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

Ugh, what a nervous homepage.

Can't you just deconstruct that webpage? As for the video, low low-res is probably the key.

Member Avatar for mmcdonald

Ugh, what a nervous homepage.

Can't you just deconstruct that webpage? As for the video, low low-res is probably the key.

I understand what you mean by nervous, but I think it's effective when your target audience is usually distracted by something as dull as a fly; so this design should result in a great conversion rate.

I am going to deconstruct it now - I just wondered if anyone had some personal tips. I knew the answer was low res... I just didn't want to believe it :)

Thanks for responding,
Michael

Edited by mmcdonald
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.