Youtube-Video und Thumbnail im korrekten 9: 16-Format anzeigen

7

Ich kann ganz einfach eine Youtube-Miniaturansicht mit den hier beschriebenen Links erhalten: Wie erhalte ich ein YouTube-Video-Thumbnail von der YouTube-API?

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

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

Aktualisieren

Es scheint, dass auch das Youtube-Video selbst schwarze Balken oben und unten aufweist, obwohl auf dem Video auf der Youtube-Seite keine schwarzen Balken angezeigt werden.

Gibt es Möglichkeiten, sowohl das Thumbnail als auch das Video im richtigen Format anzuzeigen?

Aktualisieren

Ich habe Folgendes gefunden: Entfernen von schwarzen Rahmen 4: 3 auf Youtube-Miniaturansichten

Der Fragesteller möchte die schwarzen oberen und unteren Balken entfernen. 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?

    
Steeven 28.03.2013, 14:30
quelle

3 Antworten

7

In der API-Dokumentation:

  

Das Tag mit dem Attributwert yt: name von mqdefault identifiziert ein Miniaturbild im Format 320 x 180 (16: 9). Dieses Bild hat auch keinen Zeitstempel und kann von jedem Punkt im Video kommen.

Also gibt es ein Bild, das für jede Videoauflösung (die ich zumindest getestet habe) im 16: 9-Format verfügbar 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, ist die beste Option wirklich, eine der verfügbaren Optionen immer im Verhältnis 4: 3 zu wählen und den Überschuss mit zu verbergen CSS. YouTube selbst hat das schon lange gemacht . Sie verwenden jetzt mehrere Thumbnails auf ihrer Site, einschließlich mqdefault.jpg .

Es ist wirklich einfach, überschüssige Breite und / oder Höhe eines Bildes zu verbergen, wenn alle Dimensionen bekannt sind. Hier ist ein Beispiel, das ein 4: 3-Bild von YouTube verwendet , wobei die schwarzen Balken ausgeblendet sind und ein 16: 9-Ergebnis erhalten bleibt. Das CSS wird zu Ihrem Vergnügen kommentiert.

    
Aken Roberts 02.04.2013, 22:41
quelle
14

YouTube bietet Bilder an, die keine schwarzen Streifen im Verhältnis 4: 3 haben. Um eine 16: 9-Video-Miniaturansicht ohne schwarze Streifen zu erhalten, versuchen Sie eine der folgenden Möglichkeiten:

%Vor%

Der erste mqdefault wird als 320x180 Pixel Bild angezeigt.

Der zweite maxresdefault wird als 1500x900 Pixel Bild angezeigt. Daher müsste die Größe geändert werden, um sie als Thumbnail zu verwenden. 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.

    
TheCarver 24.09.2013 10:37
quelle
1

Nachdem ich eine Weile nach dem Netz gesucht habe, um dieses Problem zu beheben, 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). Das Wrapper-Div ist also kleiner als der Iframe und wenn Sie es über das Video positionieren, können Sie die schwarzen Ränder ausblenden, die Sie nicht möchten. Ich denke, das ist die beste Lösung von allem, was ich bisher versucht habe.

Versuchen Sie in diesem Beispiel, nur den iframe einzubetten, und unten sehen Sie einen kleinen schwarzen Rahmen. Wenn Sie den iframe in das div-Element einfügen, ist der Rahmen nicht mehr vorhanden, da das div den iframe überlappt und kleiner als das Video ist und es hat einen Überlauf: versteckt, so dass alles, was außerhalb der div-Dimensionen liegt, verborgen ist.

%Vor%

In meinem Fall war der Rahmen mit etwa 2px Höhe, also habe ich die Wrapper Div 2px kleiner in der Höhe, um den Rand zu verstecken, in Ihrem Szenario, wenn der Rand oben auf dem Video oder an den Seiten und / oder mit anderen ist Dimensionen, Sie müssen 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 ausgeblendet.

Hoffe, das wird helfen.

    
dekiss 04.10.2013 07:52
quelle

Tags und Links