Viewed   84 times

E.g. I have a link

http://img.youtube.com/vi/aOPGepdbfpo/0.jpg

for a youtube video thumbnail:

And I would like to remove the black top and bottom border so I get a picture like this:

Could it be done using PHP function javascript/jQuery or maybe youtube api itself?

 Answers

4

Use it as a background image, center it and change height.

http://dabblet.com/gist/4012604

.youtubePreview {
    background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
    height:204px;
    width:480px;
}
Saturday, August 13, 2022
3

I would request a video feed and make use of the author parameter. This should give you all the videos of a specific user.

In your example: http://gdata.youtube.com/feeds/api/videos?author=stevesattlerfilms

Tuesday, December 6, 2022
 
5

If you want to go by the color, the wideimage library (GD based) has this implemented already. The method is called autoCrop, an online demonstration exists.

This might already fulfil your needs.

Monday, August 1, 2022
 
kalina
 
1

A couple of things I see going on that may be of use. First of all, removing the origin parameter will help during development, as it prevents access to the API in general if A) it doesn't match exactly, and B) sometimes for no reason when on localhost.

As you note, though, even when removing it in your case the API isn't responding. This is because creating a YT.player object consumes a bit of time, and so you then are trying to trigger a playVideo method before the object is fully initialized. Instead you should utilize the onReady callback parameter of the YT.Player object, like this:

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var yt_players = {};

    function onYouTubeIframeAPIReady() {
        yt_players['1-5'] = new YT.Player('ytplayer_1-5', {
          events: {'onReady': onPlayerReady} // bind to callback for when object is ready
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo(); // this is kept generic so the same callback can be used with any player object
    }

Here's a fiddle with the working code: http://jsfiddle.net/jlmcdonald/dEjXL/

Friday, November 18, 2022
3

Thumbnails you can load from video url.

VIDEO URL

http://www.youtube.com/watch?v=Xzf0rvQa4Mc

THUMBNAIL URL

http://i1.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i2.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i3.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

http://i4.ytimg.com/vi/Xzf0rvQa4Mc/default.jpg

It takes some time to replicate images to all thumbnails urls (maybe servers) for new videos.

If there is no thumbnail, it returns image with camera (exactly 893 bytes length).

EXAMPLE

http://i4.ytimg.com/vi/Xzf0rvQa4Md/default.jpg

Saturday, October 29, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :