Search code examples
htmlcsspcloud

<Video> frame thumbnail photo

My site http://www.kreativekouples.com/videography/ Has a load of videos that are hosted on pCloud but when showcasing on my website it looks odd as they are all black previews. Can I upload a thumnail photo like YouTube allows on their videos?

<video width="100%" controls>
  <source src="https://filedn.com/lhwRBSoh6FuH95L1pyyOOz4/kir_manni_wedd.mp4" type="video/mp4"> 
  <source src="https://filedn.com/lhwRBSoh6FuH95L1pyyOOz4/kir_manni_wedd.mp4" type="video/ogg">
  Your browser does not support HTML5 video. 
</video>
Solution

  • Add poster="{photo-url example (placeholder.png)}" to the video tag.

    <video width="100%" poster="placeholder.png" controls>

    Your browser does not support HTML5 video.