在youtube缩略图上删除黑色边框4:3
Der*_*der 46 javascript php jquery youtube-api
我有一个链接
http://img.youtube.com/vi/aOPGepdbfpo/0.jpg
对于YouTube视频缩略图:
我想删除黑色的顶部和底部边框,以便我得到这样的图片:
可以使用PHP函数javascript/jQuery或者youtube api本身吗？
The*_*ver 99
YouTube提供的图片不具有4:3比例的黑条.要获得没有黑条的16:9视频缩略图,请尝试以下方法之一:
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg
第一个mqdefault是320x180像素的图像.
第二个maxresdefault是1500x900像素的图像,因此需要调整大小以用作缩略图.这是一个很好的图像,但它并不总是可用.如果视频质量低(我想象的不到720p,不完全确定),那么'maxresdefault'就变得不可用了.所以永远不要依赖它.
- 当解决方案如此简单时,我喜欢它!谢谢你的回答 - 它为我节省了很多时间,而这些时间本来可以用来形成包装器和css一起使用 - 而其他任何答案/评论都没有提到它们会在响应式设计被考虑后立即中断(不使用百分比) (5认同)
Ric*_*haw 16
将其用作背景图像,居中并更改高度.
http://dabblet.com/gist/4012604
.youtubePreview {
background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
height:204px;
width:480px;
}
- 另一种解决方案是为图像设置负顶部和底部边距,并在图像容器上设置"overflow:hidden".这样的东西http://dabblet.com/gist/4012647 (4认同)
Ser*_*món 12
如果您希望它具有灵活的宽度,请使用:
HTML
<div class="thumb">
<img src="...">
</div>
CSS
.thumb {
overflow: hidden;
}
.thumb img {
margin: -10% 0;
width: 100%;
}
- 这对于我的具有可变和响应式视频宽度的用例非常有用。 (2认同)
- 这是我认为最好的答案。很高兴我向下滚动。 (2认同)
要删除black borders从Youtube thumbnail我们不必有写seperate code或CSS.使用时只需将ytimg.com网站,即表示YouTube image,其fetches从图像中YouTube,像thumbnails并icons要求其来自该域.
示例如下 -
原始图像 [带边框]
http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg
没有边框/条带
要么
- 这是一个重要的区别，没有明确记录 (2认同)
| 归档时间： |
|
| 查看次数： |
38838 次 |
| 最近记录： |