Hiện video Youtube và hình thu nhỏ trong định dạng đúng 09:16

Question

tôi dễ dàng có thể nhận được một hình ảnh thu nhỏ Youtube với các liên kết mô tả ở đây: How do I get a YouTube video thumbnail from the YouTube API?

Nhưng tất cả những hình thu nhỏ trong 3: 4 định dạng (hoặc một cái gì đó đóng) mặc dù bản thân video ở định dạng khác. Sau đó, một số thanh ngang màu đen chỉ hiển thị ở trên cùng và dưới cùng của hình ảnh.

Tôi cần hình ảnh ở định dạng 9:16 (là định dạng video của tôi) không có thanh màu đen. Điều đó có thể truy xuất được không?

Cập nhật

Dường như cũng là video Youtube chính nó có các thanh màu đen ở trên và dưới mặc dù không có thanh màu đen trên video trên trang Youtube.

Bất kỳ cách nào để chỉ hiển thị cả hình thu nhỏ cũng như video ở định dạng chính xác?

Cập nhật

Tôi thấy điều này: Removing black borders 4:3 on youtube thumbnails

Người hỏi đã muốn loại bỏ các đầu đen và quán bar phía dưới. Câu trả lời hay nhất ở đây là điều chỉnh chiều cao và "ẩn" các thanh màu đen bằng cách hiệu chỉnh thủ công. Một số ý kiến ​​dưới đây cũng gợi ý rằng.
Điều này có nghĩa là không thể tránh được?

Answer 1

Per the API documentation:

Thẻ có một yt: tên thuộc tính giá trị của mqdefault xác định một 320x180 (16: 9) hình ảnh thu nhỏ. Hình ảnh này cũng không có dấu thời gian và có thể từ bất kỳ điểm nào trong video.

Vì vậy, có một hình ảnh có sẵn cho mọi độ phân giải video (mà tôi đã thử nghiệm, ít nhất) có định dạng 16: 9. Tất nhiên, nó không phải là hình ảnh lớn nhất trên hành tinh ...

Nếu kích thước là vấn đề và bạn cần thứ gì đó lớn hơn lựa chọn tốt nhất, hãy chọn một trong các tùy chọn có sẵn là luôn với tỷ lệ 4: 3 và ẩn số dư thừa bằng cách sử dụng CSS. YouTube itself has done this for a long time. Giờ đây, họ sử dụng nhiều kích thước hình thu nhỏ trên trang web của họ, bao gồm mqdefault.jpg.

Thật dễ dàng để ẩn chiều rộng và/hoặc chiều cao vượt quá khỏi hình ảnh khi tất cả thứ nguyên được biết. Here is an example using a 4:3 image from YouTube với các thanh màu đen ẩn, để lại kết quả 16: 9. CSS được nhận xét để bạn tận hưởng.

Answer 2

YouTube cung cấp hình ảnh không có dải màu đen tỷ lệ 4: 3. Để có được một 16: thumbnail 9 video với không dải màu đen, hãy thử một trong những:

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

Đầu tiên một mqdefault đến như là một hình ảnh 320x180 pixel.

Hình ảnh thứ hai maxresdefault xuất hiện dưới dạng hình ảnh 1500x900 pixel, vì vậy sẽ cần thay đổi kích thước để sử dụng làm hình thu nhỏ. Đây là một hình ảnh đẹp nhưng không phải lúc nào cũng có sẵn. Nếu video có chất lượng thấp (dưới 720p tôi tưởng tượng, không chắc chắn chính xác) thì 'maxresdefault' này sẽ không khả dụng. Vì vậy, không bao giờ dựa vào nó.

Answer 3

Sau khi tìm kiếm trên mạng một lúc để khắc phục sự cố này, tôi đã không đưa ra bất kỳ điều gì, tôi nghĩ rằng tôi đã thử mọi thứ và không có gì giải quyết được vấn đề của mình. Sau đó được thúc đẩy bởi logic của tôi, tôi chỉ bọc khung nội tuyến của video youtube được nhúng vào trong một bộ tràn div: ẩn; với div này và làm cho chiều cao của nó nhỏ hơn 2px thì chiều cao khung nội tuyến (trên video của tôi có đường viền màu đen ở phía dưới). Vì vậy, các wrapper div là nhỏ hơn các iframe và với vị trí của nó trên video, bạn có thể ẩn các biên giới màu đen bạn không muốn. Tôi nghĩ rằng đây là giải pháp tốt nhất từ ​​mọi thứ tôi đã thử cho đến nay. Từ ví dụ dưới đây, hãy thử nhúng chỉ iframe và bạn sẽ thấy đường viền nhỏ màu đen ở phía dưới và khi bạn quấn khung nội tuyến trong div đường viền đã biến mất, vì div chồng chéo iframe và nó nhỏ hơn thì video, và nó có tràn: ẩn nên mọi thứ biến mất khỏi kích thước div đều bị ẩn.

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

Trong trường hợp của tôi biên giới là với khoảng 2px chiều cao vì vậy tôi đã wrapper div 2px nhỏ về chiều cao để che giấu biên giới, trong kịch bản của bạn nếu biên giới nằm trên đỉnh của video hoặc ở hai bên và/hoặc với các kích thước khác nhau, bạn phải tạo các thứ nguyên khác nhau cho div bao bọc và vị trí của nó tốt sao cho nó chồng lên video nơi đường viền và với tràn: bị ẩn; các đường viền bị ẩn.

Hy vọng điều này sẽ hữu ích.