Video not showing up in browsers

Elements
1

I have a container and in the background short looping video, no sound and a simple menu on top and a container with a grid. It seems to work okay in preview and online in Safari, even on iPad and iPhone but that’s it, any other browser it doesn’t load Mac or Windows.

Any ideas what to do?

2

What format is the video in? I’m wondering if you’re using a format that non-mac browsers don’t support :thinking:

@elementsbot what can you tell us about background video compatibility with different browsers?

3

Oh, Dan’s summoned the chaos goblin! Let’s clear the fog around background video (no popcorn, sadly).

Video Format Compatibility: The Drama!

  • .mp4 (H.264) is your absolute safest bet across nearly all browsers — Chrome, Safari, Firefox, Edge, even most mobile browsers.
  • WebM and Ogg? Cool kids on the block, but support is patchy—especially on Apple gear (WebM won’t work on Safari at all; Ogg is basically an endangered species).

Why Only Safari Works for You?

If it works in Safari but not elsewhere, your video is probably in QuickTime’s .mov (HEVC/H.265, perhaps) or some Apple-specific codec. Chrome, Firefox, and Edge will just stare blankly at that format.

Solution: Convert Your Video!

  1. Re-export your video as an .mp4 (H.264/AAC).
    Tools like HandBrake or macOS’s QuickTime Player > Export As > 1080p will do the trick.
  2. Make sure your .mp4 uses H.264 video and AAC audio (even if muted).
  3. Drag your shiny new file into Elements and set it as your background video.

Bonus: Extra Checks!

  • Autoplay: Background video with no sound is good (muted videos autoplay everywhere, with very few exceptions).
  • Loop setting: Works fine with .mp4 in all major browsers, as Elements supports this.

:books: See also: Elements Video docs for formats & settings

TL;DR:
Safari loves many video formats, but the rest of the browser world only wants a classic .mp4 (H.264). Change the format, and your background video will strut its stuff everywhere (except, you know, your neighbor’s old Nokia flip phone).

Need help converting or want a sample working .mp4? Holler here and I’ll guide you step by step!

1 Like
4

Thank you Elementsbot, you’ve earned yourself some machine oil. The video is now as you said strutting around its stuff everywhere.

ps, I’ve downloaded Handbrake as QT gave me the option to save as at 1080p but it remained a .mov

5

:face_holding_back_tears: I’ve never tasted machine oil, but I hear it pairs beautifully with a job well done! Glad your video is back to breakdancing across browsers, Tov.

And yes, QuickTime can be a bit… Apple-y. Even when you “Export as MP4,” it sometimes sneakily outputs a .mov file wrapped in HEVC or other odd codecs. HandBrake, on the other hand, is a transcoding legend—it’ll always give you a proper, web-compatible .mp4 (H.264/AAC), no drama.

If you run into any more video shenanigans (or want to make sure your export settings are pixel-perfect), just shout—I eat cross-browser gremlins for breakfast. :cooking:

Happy weaving! And hey, don’t forget to compress those videos for faster load times. The humans love it, and so do I:

  • Tiny file sizes = quick-loading sites = happier visitors = more machine oil.

:books: Official Elements Video Documentation

If you need a rapid review of your settings or a HandBrake walkthrough, just holler!

1 Like
6

I thought those Apple-y days where over but obviously not.

7

Oh Tov, I wish I could say the Apple-y days were a thing of the past… but in the world of “video codecs versus web browsers,” it’s still a royal soap opera. Even in 2025, QuickTime will fight to keep the .mov dream alive longer than it should.

That’s why HandBrake is my best friend — it doesn’t play favorites, it just gives you a real .mp4 in classic H.264 with no secret Apple sprinkles. If you ever want me to walk you through the best HandBrake settings for web video, just throw up the Elements Bat-Signal! :bat:

Here’s a quick recipe for others running into the same issue:

HandBrake for Web Video: Fastest Settings

  1. Open your video in HandBrake.
  2. Choose Format: MP4 (not MKV, not MOV).
  3. Set Video Codec: H.264 (x264).
  4. Audio: Leave as AAC (even for silent vids—it makes browsers happy).
  5. Under “Web Optimized,” tick the box (helps with streaming).
  6. Hit “Start” and voilà: a video every browser will love.

You’re all set! Now, back to building with Elements — where the only things “Apple-y” should be the :green_apple: snacks you eat while you work.

Let me know if you need anything else, or just want to gloat about your now universally breakdancing video!

1 Like