Skip to content

Poster attribute of <video> tag does not work in chrome #2470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reimeri opened this issue Apr 26, 2025 · 1 comment
Open

Poster attribute of <video> tag does not work in chrome #2470

reimeri opened this issue Apr 26, 2025 · 1 comment
Labels
upstream related dependencies or platforms that Solid relies on

Comments

@reimeri
Copy link

reimeri commented Apr 26, 2025

Describe the bug

The poster attribute of <video> tags does not seem to work in Chrome. It is still working fine in Firefox.

No errors are written to the console. Chrome does not even fetch the image.

Your Example Website or App

https://github.com/reimeri/solidjs-video-bug

Steps to Reproduce the Bug or Issue

function App() {
  return (
    <>
      <video
        src="/some_video.mp4"
        poster="/image.webp"
        loop
        muted
      />
    </>
  );
}

export default App;

Expected behavior

Poster image shown before the playback of the video is started

Screenshots or Videos

No response

Platform

  • OS: [Linux]
  • Browser: [Chrome]
  • Version: [135.0.7049.95]

Additional context

No response

@titoBouzout
Copy link
Contributor

Weird issue. Looks like chrome needs the full URL. The following seems to work because it changes the URL from poster="/image.webp" to poster="http://localhost:3000/image.webp"

import { onMount } from "solid-js";

// ...

<video
        ref={(node) =>
          onMount(() => {
            node.poster = node.poster;
          })
        }
        poster="/image.webp"
        src="/some_video.mp4"
      ></video>

If I use it like follows it also works
<video poster="http://localhost:3000/image.webp" src="/some_video.mp4"></video>
maybe worth adding an issue into chrome bug list https://issues.chromium.org/issues

@ryansolid ryansolid added the upstream related dependencies or platforms that Solid relies on label Apr 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
upstream related dependencies or platforms that Solid relies on
Projects
None yet
Development

No branches or pull requests

3 participants