How to capture image of Youtube Video and display on web site

I am interested in creating a website that displays a few "screen captures" on the screen. These "screen captures" can be any image file type (ex: jpeg, png, etc.) I would like to be able to display the first frame screen capture of a Youtube Video. When the user clicks on this, the user will be redirected to the Youtube URL.

How can I retrieve the screen shot or first frame image of a Youtube video, given it's URL? For example: http://www.youtube.com/watch?v=gbcmYbMB9mo Using this, I'd like to have an image of the GoPro camera. Is there an API to capture the first image of the Youtube Video?

Thanks

Solution

You can use YouTube IFrame API (see https://developers.google.com/youtube/iframe_api_reference).

Here is an example for playing the video provided in your question (gbcmYbMB9mo):

<body onload="LoadYouTubeIframeAPI()">
    <script type="text/javascript">
        var player = null;
        var playerParams =
        {
            playerVars:
            {
                "enablejsapi":1,
                "origin":document.domain,
                "rel":0
            },
            events:
            {
                "onReady":onPlayerReady,
                "onError":onPlayerError,
                "onStateChange":onPlayerStateChange
            }
        };
        function LoadYouTubeIframeAPI()
        {
            var scriptElement = document.createElement("script");
            scriptElement.src = "http://www.youtube.com/iframe_api";
            var firstScriptElement = document.getElementsByTagName("script")[0];
            firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);
        }
        function onYouTubeIframeAPIReady()
        {
            player = new YT.Player("player",playerParams);
        }
        function onPlayerReady(event)
        {
            player.loadVideoById("gbcmYbMB9mo");
        }
        function onPlayerError(event)
        {
            ...
        }
        function onPlayerStateChange(event)
        {
            if (event.data == YT.PlayerState.ENDED)
            {
                ...
            }
        }
    </script>
</body>

You might need to "play a little" with this code in order to prevent the video from starting automatically...