skip to Main Content

So I created a webiste on netlify which is being hosted. I have videos on this site and I have an issue where the thumbnail for the video does not show, only a play button,until ive pressed that start button to play the video then it appears.This only happens when I am on the website on my phone both with safari and chrome.

However when i go on the website on my desktop /laptop it is completely fine and i can see the thumbnail as the first frame of the video.

On Desktop

What is causing this and what’s a good solution?
enter image description here

On Phone:

enter image description here

Code example for the video:

<video width="380" height="380" playsinline controls>
            <source src="../static/images/surfdome (1).mp4" type="video/mp4">
          </video>

I want to make it so that i can always see the first frame on the video even before playing the video

2

Answers


  1. <video width="380" height="380" playsinline controls poster="../static/images/video-thumbnail.jpg">
      <source src="../static/images/surfdome (1).mp4" type="video/mp4">
    </video>
    

    Replace "../static/images/video-thumbnail.jpg" with the actual path to the image you want to use as the video thumbnail. This image will be displayed as a placeholder until the user presses the play button, and it will give them a preview of the video’s content.

    By adding the poster attribute, you should ensure that the thumbnail is consistently displayed both on desktop and mobile devices before the video starts playing.

    Login or Signup to reply.
  2. Try both methods to see if they help with the issue.

    <video preload width="380" height="380" playsinline controls>
      <source src="../static/images/surfdome (1).mp4#t=0.001" type="video/mp4">
    </video>
    

    Adding "#t=0.001" at the end of the video URL can help display the thumbnail, and using the "preload" attribute may also improve the thumbnail display.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search