Removing Black Borders 4:3 on Youtube Thumbnails

Removing black borders 4:3 on youtube thumbnails

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;
}

YouTube Video Feed Thumbnails (without black bars)?

It's also worth noting that all thumbnails are currently in a 4:3 aspect ratio, for historical purposes. If the underlying video is 16:9 and you plan on using a 16:9 player, then it makes sense to position the thumbnail so that the top and bottom black bars are hidden. That's independent of whether you use a lower-resolution or higher-resolution thumbnail.

Retrieve 16:9 youtube thumbnails instead of the 4:3 black bordered ones?

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

You would need you url to look similar to one of those.
Not sure what:
(string)$media->group->thumbnail[0]->attributes()->url; is returning but I would take a look at that URL and make sure it resembles something similar to above.

For you below example you want you URL to resemble this.

http://img.youtube.com/vi/0GQPoyMr30o/mqdefault.jpg
http://img.youtube.com/vi/0GQPoyMr30o/maxresdefault.jpg

Try doing something like this:

<?php 
$thumbnail = (string)$media->group->thumbnail[0]->attributes()->url;
$thumbnail = str_replace('0.jpg', 'mqdefault.jpg', $thumbnail);
?>

<img src="<?php echo $thumbnail; ?>" />

Removing black bars off video thumbnail

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.

Remove black borders for a youtube embed

Player creates iframe in which the video plays with youtube
This represents a problem because you can not change the parameters of objects in cross domains.
The object who contans video is in player.c.contentWindow.querySelector(".video-stream.html5-main-video")

Only solution I now is to transform container .bg_utube with css like this

div.bg_utube {
        position: fixed;
        z-index: -99999;
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: 100%;
        -ms-transform: scale(2,3);
      -webkit-transform: scale(2,3);
      transform: scale(2,3);
    }

Show Youtube video and thumbnail in correct 9:16 format

Per the API documentation:

The tag that has a yt:name attribute value of mqdefault identifies a 320x180 (16:9) thumbnail image. This image does also does not have a timestamp and could be from any point in the video.

So there's an image that's available for every video resolution (that I've tested, at least) that is in 16:9 format. Of course, it isn't the biggest image on the planet...

If the size is an issue, and you require something bigger, than the best option really is to choose one of the available options that is always in 4:3 ratio, and hide the excess using CSS. YouTube itself has done this for a long time. They utilize multiple thumbnail sizes across their site now, including mqdefault.jpg.

It's really easy to hide excess width and/or height from an image when all the dimensions are known. Here is an example using a 4:3 image from YouTube with the black bars hidden, leaving a 16:9 result. The CSS is commented for your enjoyment.

---

Related Topics