How To Take Youtube Screenshot

Solution 2:

The following bookmarklet capture a Youtube video at click time, in the current video resolution and quality, as you are seeing it, but without the toolbars overlays.

javascript:void(function(){let canvas=document.createElement("canvas"),video=document.querySelector("video"),ctx=canvas.getContext("2d");canvas.width=parseInt(video.offsetWidth),canvas.height=parseInt(video.offsetHeight),ctx.drawImage(video,0,0,canvas.width,canvas.height);var base64ImageData=canvas.toDataURL("image/jpeg"),o = new Date(0),p = new Date(video.currentTime*1000),filename="📷Capture_"+new URL(document.location.href).searchParams.get("v")+"_"+document.title+"@"+new Date(p.getTime()-o.getTime()).toISOString().split("T")[1].split("Z")[0]+".jpg",a=document.createElement("a");a.download=filename,a.href=base64ImageData,a.click()}());

Enhancement of the bookmarklet found here https://github.com/ReeganExE/youtube-screenshot.:

• Image served as file download.

• Does not block the playing video.

• The image title contains the Youtube ID, the video title, and the exact time of the capture in the video.

• Modified to work also in Firefox

Solution 3:

If manually set up image this might be help you.

Try add poster="placeholder.png" //photo you want to the video tag.

example

<video width="470" height="255" poster="placeholder.png" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   <source src="video.webm" type="video/webm">
   <object data="video.mp4" width="470" height="255">
   <embed src="video.swf" width="470" height="255">
   </object>
</video>