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:
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
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.
Try both methods to see if they help with the issue.
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.