Removing black borders 4:3 on youtube thumbnails
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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?
php javascript jquery youtube-api
add a comment |
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?
php javascript jquery youtube-api
2
set css image height....
– Eugen
Nov 4 '12 at 17:00
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57
add a comment |
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?
php javascript jquery youtube-api
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?
php javascript jquery youtube-api
php javascript jquery youtube-api
edited Nov 4 '12 at 17:03
Derfder
asked Nov 4 '12 at 16:57
DerfderDerfder
1,07893581
1,07893581
2
set css image height....
– Eugen
Nov 4 '12 at 17:00
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57
add a comment |
2
set css image height....
– Eugen
Nov 4 '12 at 17:00
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57
2
2
set css image height....
– Eugen
Nov 4 '12 at 17:00
set css image height....
– Eugen
Nov 4 '12 at 17:00
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57
add a comment |
7 Answers
7
active
oldest
votes
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;
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
4
Another solution would be to set negative top and bottom margins for the image and setoverflow: hidden
on the image container. Something like this dabblet.com/gist/4012647
– Ana
Nov 4 '12 at 17:14
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
|
show 6 more comments
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.
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
4
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
add a comment |
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%;
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
add a comment |
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
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
- http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
add a comment |
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
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
add a comment |
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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&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.
add a comment |
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>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f13220715%2fremoving-black-borders-43-on-youtube-thumbnails%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
4
Another solution would be to set negative top and bottom margins for the image and setoverflow: hidden
on the image container. Something like this dabblet.com/gist/4012647
– Ana
Nov 4 '12 at 17:14
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
|
show 6 more comments
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;
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
4
Another solution would be to set negative top and bottom margins for the image and setoverflow: hidden
on the image container. Something like this dabblet.com/gist/4012647
– Ana
Nov 4 '12 at 17:14
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
|
show 6 more comments
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;
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;
answered Nov 4 '12 at 17:03
Rich BradshawRich Bradshaw
52.1k39157231
52.1k39157231
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
4
Another solution would be to set negative top and bottom margins for the image and setoverflow: hidden
on the image container. Something like this dabblet.com/gist/4012647
– Ana
Nov 4 '12 at 17:14
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
|
show 6 more comments
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
4
Another solution would be to set negative top and bottom margins for the image and setoverflow: hidden
on the image container. Something like this dabblet.com/gist/4012647
– Ana
Nov 4 '12 at 17:14
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
1
1
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
I have edited my question.
– Derfder
Nov 4 '12 at 17:04
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '12 at 17:05
Looks the same to me… What's changed?
– Rich Bradshaw
Nov 4 '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 4 '12 at 17:07
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 4 '12 at 17:07
4
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 dabblet.com/gist/4012647– Ana
Nov 4 '12 at 17:14
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 dabblet.com/gist/4012647– Ana
Nov 4 '12 at 17:14
1
1
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
You can use background-size, but a much better way would be to do what Ana suggested above.
– Rich Bradshaw
Nov 4 '12 at 17:50
|
show 6 more comments
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.
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
4
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
add a comment |
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.
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
4
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
add a comment |
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.
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.
edited Sep 25 '13 at 11:10
answered Sep 24 '13 at 10:18
TheCarverTheCarver
10.8k2078133
10.8k2078133
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
4
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
add a comment |
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
4
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
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
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
@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
4
4
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
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
add a comment |
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%;
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
add a comment |
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%;
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
add a comment |
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%;
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%;
edited Jul 21 '16 at 14:59
answered Jul 21 '16 at 14:52
Sergi RamónSergi Ramón
1,1881213
1,1881213
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
add a comment |
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
This worked great for my use case with variable and responsive video widths.
– Nick Rice
Sep 6 '16 at 20:24
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
this one was the best answer in my opinion. glad I scrolled down.
– kefet
Oct 11 '17 at 0:13
add a comment |
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
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
- http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
add a comment |
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
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
- http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
add a comment |
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
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
- http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
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
http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OR
- http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
answered Feb 20 '17 at 7:17
PB-BitWiserPB-BitWiser
7331822
7331822
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
add a comment |
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
This is an important distinction that Isn't clearly documented
– mjwatts
Sep 8 '17 at 11:33
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
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
add a comment |
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
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
add a comment |
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
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
add a comment |
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
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
answered Jun 12 '16 at 19:28
GinoGino
1,26621419
1,26621419
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
add a comment |
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
7
7
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
what is sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo in this context?
– PB-BitWiser
Feb 20 '17 at 6:49
add a comment |
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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&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.
add a comment |
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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&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.
add a comment |
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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&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.
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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&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.
answered Oct 4 '13 at 7:46
dekissdekiss
7713
7713
add a comment |
add a comment |
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>
add a comment |
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>
add a comment |
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>
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>
.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>
.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>
answered Nov 16 '18 at 13:42
Sampath KumarSampath Kumar
12
12
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f13220715%2fremoving-black-borders-43-on-youtube-thumbnails%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
set css image height....
– Eugen
Nov 4 '12 at 17:00
With PHP you can crop the image and remove the black borders like this.
– machineaddict
Apr 30 '15 at 10:57