Search code examples
vue.jsvideonuxt.jsposter

Vue / Nuxt - How to display a "poster" in a video element

I have a video to display in my Nuxt app. When pointing the videos poster attribute to an image, it doesn't display. As a test, i created an image element pointing towards the same location and the image displays.

Question

How can I display the poster for a video?

<div>
  <video controls preload="none" poster="../static/images/videoposter.png">
    <source src="../static/video/Websitemp4.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
 </video>
</div>
Solution

  • If the path to your image is /static/images/video poster.png then use src="/images/videoposter.png"

    You don’t need to use a relative path, as you have in your code example.