64

E.g. I have a link

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

for a youtube video thumbnail:

enter image description here

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

enter image description here

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

Derfder
  • 3,204
  • 11
  • 50
  • 85

8 Answers8

133

YouTube offers images that don't have the 4:3 ratio black strips. To get a 16:9 video thumbnail with no black strips, try one of these:

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

The first one mqdefault comes as a 320x180 pixel image.

The second one maxresdefault comes as a 1500x900 pixel image, so it would need resizing to use as a thumbnail. This is a nice image but it isn't always available. If the video is of a low quality (less than 720p I'd imagine, not exactly sure) then this 'maxresdefault' becomes unavailable. So never rely on it.

TheCarver
  • 19,391
  • 25
  • 99
  • 149
  • Is there a setting to provide this version in the video owner's configuration? I get 404s when I try this URL with the target video id. The other sizes work. – Neil Monroe Sep 24 '13 at 17:09
  • @NeilMonroe, good point. Not too sure about any settings. This is the image location that I use on our own videos, which are high-quality, and never fail to produce this image. I would take a guess that if the videos are not quality enough to produce the 1500px x 900px, then the image may not be created. You could create a fallback procedure so if that image isn't available then do some funky CSS to hide the black strips. – TheCarver Sep 24 '13 at 22:11
  • 7
    i love it when solutions are as simple as this! thank you for this answer -- it saved me a lot of time that would have been spent forming wrappers and the css to go with it -- and none of the other answers/comments even mention they will break as soon as responsive design is considered (without using percentages) – aequalsb Dec 15 '15 at 14:13
  • This should be marked as correct answer, because its more general and requires less work. – Ales Mar 26 '20 at 15:26
  • it will not work if borders are on horizontal side... but I think youtube is using some algorithm to remove borders from either vertical or horizontal side – Muhammad Asif Feb 07 '23 at 05:46
23

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;
}
Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
  • Looks the same to me… What's changed? – Rich Bradshaw Nov 04 '12 at 17:05
  • I have removed html/css as a possibilty because I have multiple youtube images not just one. It would ne overkill to append stuff via javascript. Isn't there any php function that could crop thi image using some aspect ratio? – Derfder Nov 04 '12 at 17:07
  • Not sure how that would be a problem? Just set the background property inline like `
    `, instead of using an img tag. Using PHP to crop it is possible, but is way more of an overhead than using CSS. Remember PHP would need to fetch the image over the internet, decompress it into RAM, crop it, compress it, then save to a disk.     – Rich Bradshaw Nov 04 '12 at 17:08
  • Well, if no other solution will be given I will use your answer. However, I will wait for other answers a couple of minutes. – Derfder Nov 04 '12 at 17:10
  • I am not a fan of inline css, but as I wrote, I will wait a little and if nothing better appears I will use your solution. – Derfder Nov 04 '12 at 17:13
  • 4
    Another solution would be to set negative top and bottom margins for the image and set `overflow: hidden` on the image container. Something like this http://dabblet.com/gist/4012647 – Ana Nov 04 '12 at 17:14
  • @RichBradshaw Problem is that I can not resize the image for my smaller thumbnails on my page. I am getting youtube thumbnail from a link http://img.youtube.com/vi/aOPGepdbfpo/0.jpg which is bigger e.g. 480x360. But if I am using your solution for my smaller images on the website (190x100) the image is not resized like when I use e.g. width="190" height="100" when using img tag. Div tag cannot do something like that. Any advice how to get resized image and then crop it? – Derfder Nov 04 '12 at 17:45
  • 1
    You can use background-size, but a much better way would be to do what Ana suggested above. – Rich Bradshaw Nov 04 '12 at 17:50
  • Yes, background-size helped ;) – Derfder Nov 04 '12 at 18:13
  • Just a note; check the compatability of `background-size` before using it. Think IE9+ is okay but earlier versions fail. Safari has some limitations with this feature too. http://caniuse.com/background-img-opts. – TheCarver Jul 14 '14 at 16:30
20

If you want it with a flexible width, use this:

HTML

<div class="thumb">
    <img src="...">
</div>

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}
Sergi Ramón
  • 1,683
  • 1
  • 15
  • 14
16

To remove the black borders from the Youtube thumbnail we need not have to write a seperate code or CSS. Simply use the ytimg.com site, that stands for YouTube image, which fetches the images from YouTube, like thumbnails and icons as required which come from that domain.

Example shown below -

Original Image [With borders]

http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg

With No borders/Strips

  1. http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg

OR

  1. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
Pranav Bilurkar
  • 955
  • 1
  • 9
  • 26
  • 2
    This is an important distinction that Isn't clearly documented – user115014 Sep 08 '17 at 11:33
  • 1
    hqdefault isn't the original image, maxresdefault is, but this image size is not always available, there is also sddefault which is in between maxres and hq – regularjoe Sep 10 '17 at 11:20
0

This is answer I gave for similar question, but it will solve your problem completely, just cut everything you don't want to be shown from the video with the wrapper div, this is done with html and css.

After searching the net a while for fix of this issue I came up with nothing, I think I have tried everything and nothing solved my problem. Then driven by my logic I just wrapped the iframe of the embedded youtube video in one div set overflow: hidden; to this div and made it's height 2px smaller then the iframe height (on my video there was black border in the bottom). So the wrapper div is smaller then the iframe and with positioning it over the video you can hide the black borders you don't want. I think that this is the best solution from everything I have tried so far.

From this example below try embedding just the iframe and you will see small black border at the bottom, and when you wrap the iframe in the div the border is gone, because the div is overlapping the iframe and it's smaller then the video, and it has overflow: hidden so everything that goes out of the div dimensions is hidden.

<div id="video_cont" style="width: 560px;
                            height: 313px;
                            overflow: hidden;">


    <iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;autoplay=0&amp;rel=0&amp;fs=0&amp;showinfo=0&amp;controls=0&amp;hd=1&amp;wmode=transparent&amp;version=2;yt:quality=high;"   frameborder="0" allowfullscreen></iframe>

</div>

In my case the border was with about 2px height so I made the wrapper div 2px smaller in height to hide the border, in your scenario if the border is on the top of the video or on the sides and/or with different dimensions, you have to make different dimensions for the wrapper div and position it good so it overlaps the video where the borders are and with overflow:hidden; the borders are hidden.

Hope this will help.

dekiss
  • 105
  • 1
  • 3
0

How youtube do it. There's lot of parameter in the image url.

https://i.ytimg.com/vi/XkOpbLBzPsY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo
Gino
  • 1,834
  • 2
  • 19
  • 20
0

I'm not an expert, i was looking for a solution to remove the black bars of youtube video thumbnails, found a few solutions but didn't worked for me. Started experimenting with the solutions i found and came up with this.

https://jsfiddle.net/1fL2ubwy/


.row, .col, [class*="col-"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.yt-thumb {
    width: 100%;
    height: 74%;
    overflow: hidden;
}
.yt-thumb > img {
    margin: -10% 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css">


<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
      </a>
    </div>
    
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
       </a>
    </div>
  </div>  
</div>
Sampath Kumar
  • 1
  • 2
0

I needed a responsive way of doing it, so let's consider this code is running on the window.addEventListener("resize");

We basically want to convert the 4:3 ratio to 16:9

<div id="video-item">
    <img src="https://i.ytimg.com/vi/{videoId}/hqdefault.jpg" />
</div>

const videoItem = document.getElementById("video-item");
const img = videoItem.querySelector("img");

resize()
{
    img.style.top = `${-(img.offsetHeight - (img.offsetWidth * 9 / 16)) / 2}px`;
    videoItem.style.height = `${9 / 16 * videoItem.offsetWidth}px`;
}

#video-item
{
    position: relative;
    overflow: hidden;
}

#video-item img
{
    width: 100%;
    position: absolute;
}

BTW, you can also fallback to the calculated height for the image (in case the image wasn't fully loaded)

img.style.top = `${-((img.offsetHeight || (3 / 4 * img.offsetWidth)) - (img.offsetWidth * 9 / 16)) / 2}px`;
Ido
  • 2,034
  • 1
  • 17
  • 16