How to get youtube video screenshot using Javascript

Last updated on December 14th, 2022 at 02:40 pm

Simple script to get the screenshot of a video URL from youtube,

You can modify the url variable below according to your convenience.
We are parsing the URL you supply and get the video ID from the query string. Pass that video ID to the above image URL to get the screenshots / thumbnails.

You might also be interested in this tutorial Get Youtube Video Screenshot Using Jquery

<script type="text/javascript">
function getScreen( url, size ) {
if(url === null){
return "";
}
size = (size === null) ? "big" : size;
var vid;
var results;
results = url.match("[\\?&]v=([^&#]*)");
vid = ( results === null ) ? url : results[1];
if(size == "small"){
return "http://img.youtube.com/vi/"+vid+"/2.jpg"; }
else {
return "http://img.youtube.com/vi/"+vid+"/0.jpg"; }
}
</script>

Create a separate function , I am adding this extra function just for your understanding

<script type="text/javascript">
	function loadme()
	{
var url = "http://www.youtube.com/watch?v=hQVTIJBZook";
var imgUrlbig = getScreen(url);
var imgUrlsmall = getScreen(url, 'small');
document.getElementById("image").innerHTML='Big Image <p> <img src="' + imgUrlbig + '" />';
document.getElementById("image").innerHTML+='Small Image <p> <img src="' + imgUrlsmall + '" />';
}
</script>

I have put all the main variables inside this function so that you can easily understand the logic.

Now lets create a button to call the above function along with a div with id=”image”, this defines the image loading area.

<button onclick="loadme()">Load Screenshots</button>
<div id="image"></div>

Modify these variable with any video URL of your choice

var url = "http://www.youtube.com/watch?v=hQVTIJBZook";

To call small or big screenshot

var imgUrlsmall = getScreen(url, 'small');

Save the above script to an HTML page and load it to see the screenshots

Demo

Disclaimer: We are not responsible for usage of this script. This script is widely available in the Internet. All we are doing here is helping our users to understand how best we can use Javascript.