anzeigen Youtube Video und Thumbnail in der richtigen 09.16 Format

Question

ich leicht ein Youtube Miniaturbild mit den Links hier beschrieben bekommen kann: How do I get a YouTube video thumbnail from the YouTube API?

Aber all diese Miniaturen sind in 3: 4-Format (oder in der Nähe etwas), obwohl Das Video selbst ist in einem anderen Format. Dann sind einige schwarze horizontale Balken oben und unten am Bild sichtbar.

Ich brauche ein Bild im 9: 16-Format (das ist mein Videoformat) ohne schwarze Balken. Ist das möglich zu retreive?

aktualisieren

es, dass auch das Video Youtube scheint sich schwarze Balken in oben und unten hat, obwohl es keine schwarzen Balken auf der Youtube-Seite auf dem Video sind.

Gibt es Möglichkeiten, sowohl Thumbnails als auch Videos im richtigen Format anzuzeigen?

aktualisieren

fand ich dies: Removing black borders 4:3 on youtube thumbnails

Der Fragesteller hat die schwarze obere und untere Balken entfernen will. Die beste Antwort hier ist, die Höhe anzupassen und die schwarzen Balken durch manuelle Korrektur zu "verstecken". Einige der folgenden Kommentare deuten ebenfalls darauf hin.
Bedeutet dies, dass es nicht möglich ist zu vermeiden?

Answer 1

Per the API documentation:

der Tag, das einen yt hat: Name Attributwert mqdefault eine 320x180 identifiziert (16: 9) thumbnail image. Dieses Bild hat auch keinen Zeitstempel und könnte von jedem Punkt im Video kommen.

Also gibt es ein Bild, das für jede Videoauflösung (die ich mindestens getestet habe), die im 16: 9-Format ist. Natürlich ist es nicht das größte Bild auf dem Planeten ...

Wenn die Größe ein Problem ist, und Sie etwas Größeres benötigen, als die beste Option wirklich ist, wählen Sie eine der verfügbaren Optionen, die immer ist im Verhältnis 4: 3, und verstecken Sie den Überschuss mit CSS. YouTube itself has done this for a long time. Sie verwenden jetzt mehrere Miniaturansichten auf ihrer Website, einschließlich mqdefault.jpg.

Es ist wirklich einfach, überschüssige Breite und/oder Höhe von einem Bild zu verstecken, wenn alle Dimensionen bekannt sind. Here is an example using a 4:3 image from YouTube mit den schwarzen Balken versteckt, so dass ein Ergebnis von 16: 9 bleibt. Das CSS wird zu Ihrem Vergnügen kommentiert.

Answer 2

YouTube bietet Bilder an, die keine schwarzen Streifen im Verhältnis 4: 3 haben. Um ein 16: 9 video thumbnail ohne schwarze Streifen, versuchen Sie eine der folgenden Optionen:

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

Die ersten mqdefault kommt als 320x180 Pixel Bild.

Die zweite maxresdefault kommt als ein 1500x900 Pixel Bild, so müsste die Größe als Miniaturbild verwendet werden. Dies ist ein schönes Bild, aber es ist nicht immer verfügbar. Wenn das Video von geringer Qualität ist (weniger als 720p würde ich mir vorstellen, nicht genau sicher), dann ist dieser 'maxresdefault' nicht mehr verfügbar. Also verlasse dich nie darauf.

Answer 3

Nachdem ich eine Weile im Netz nach der Lösung dieses Problems gesucht habe, habe ich nichts gefunden, ich denke ich habe alles versucht und nichts hat mein Problem gelöst. Dann, angetrieben von meiner Logik, habe ich einfach den iframe des eingebetteten YouTube-Videos in einen div set-overflow eingepackt: versteckt; zu diesem Div und machte es Höhe 2px kleiner als die Iframe Höhe (auf meinem Video gab es schwarzen Rand in der Unterseite). Also ist der Wrapper div kleiner als der iframe und mit der Positionierung über dem Video kannst du die schwarzen Ränder verstecken, die du nicht willst. Ich denke, das ist die beste Lösung von allem, was ich bisher versucht habe.

In diesem Beispiel versuchen Sie, nur den iframe einzubetten, und unten sehen Sie einen kleinen schwarzen Rahmen. Wenn Sie den iframe in das div umbrechen, ist der Rahmen nicht mehr vorhanden, da div den iframe überlappt und kleiner ist Video, und es hat einen Überlauf: versteckt, so dass alles, was aus den div-Dimensionen hinausgeht, versteckt ist.

<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 meinem Fall die Grenze mit etwa 2px Höhe war so machte ich die Wrapper div 2px geringere Höhe die Grenze, in Ihrem Szenario zu verstecken, wenn die Grenze auf der Oberseite des Videos oder an den Seiten und/oder mit verschiedenen Dimensionen, müssen Sie verschiedene Dimensionen für die Wrapper div und positionieren Sie es gut, so dass es das Video überlappt, wo die Grenzen sind und mit Überlauf: versteckt; Die Grenzen sind versteckt.

Hoffe, das wird helfen.