Zeigen Sie Youtube-video und thumbnail in der richtigen 9:16-format
Kann ich ein Youtube-thumbnail-Bild mit die links hier beschrieben: Wie bekomme ich ein YouTube video-thumbnail aus der YouTube-API?
Aber alle diese Bilder werden im 3:4-format (oder etwas enger), obwohl das video selbst wird in einem anderen format. Dann ein paar schwarze horizontale Balken sind nur sichtbar, am oberen und unteren Rand des Bildes.
Brauche ich ein Bild im 9:16 format (das ist mein video-format), ohne schwarze Balken. Ist das möglich zurückgegeben?
Update
Scheint es, dass auch das Youtube-video selbst hat schwarze Balken oben und unten, auch wenn es keine schwarzen Balken auf das video auf der Youtube-Seite.
Alle Möglichkeiten, um einfach nur zeigen sowohl Miniatur-als auch als video im richtigen format?
Update
Fand ich dies: Entfernen von schwarzen Balken von 4:3 auf youtube thumbnails
Der Fragesteller will, entfernen Sie die oberen und unteren schwarzen Balken. Die besten Antworten hier sind, um die Höhe einzustellen und "verbergen" sind die schwarzen Balken, die durch manuelle Korrektur. Einige der Kommentare hier unten auch darauf hin, dass.
Bedeutet das, dass es nicht möglich ist, zu vermeiden?
- Eine der Lösungen, die ich denken kann, ist, um Miniaturbilder im 9:16 format und laden Sie Sie separat. Obwohl es vielleicht ein unpraktisch job.
- Ja, natürlich 🙂 Aber nicht die meisten benutzerfreundliche Weise für einen Benutzer hinzufügen seinem video.
- Sie können denken, in der Größe verändern Bild zu passen die Anforderungen? Eine separate imagecache Art der Sache?
- Ich weiß nicht, was du meinst mit imagecache... Aber das Bild nicht nur in der Größe verändert werden. Wenn ich diesen Weg gehen, dann zuschneiden nötig wäre.
- Sie erwähnen, benutzerfreundlich, machen Sie etwas für mehrere Benutzer-Seite? Eine blog-Website? Können Sie etwas konkreter über das, was Sie brauchen, um machen, kann ich mir ein oder zwei Möglichkeiten, dies zu tun.
- Ein Benutzer fügt die URL für ein youtube-video in ein Textfeld aus und speichert ihn in der Datenbank. Von dieser URL bin ich beim abrufen der video-ID. Dann benutze ich diese ID für einen link, wie
http://img.youtube.com/vi/<video-id>/hqdefault.jpg
zu zeigen, ein start-Bild für das video. Mein Punkt oben ist nur, dass ich nicht wollen, dass die Benutzer zu erstellen und laden Sie ein start-Bild. - Ich meine, es hängt auch davon ab, wie Sie wollen, um zu zeigen, das Bild. Sie könnten etwas tun möchten, importieren Sie Sie auf Ihre Website und ändern Sie die Größe mit php. Oder Sie können legen Sie es als hintergrund für ein Div, und erzwingen Sie dann das Div auf eine bestimmte Größe?
- Dies ist wahrscheinlich einfach für Euch, aber die Art von Sache, die ich denken elated.com/articles/add-image-uploading-to-your-cms
- Na ja okay, aber wie kann ich wissen, ob es eine schwarze Leiste, oder nicht? Und es wird immer die gleiche Höhe haben? Ich meine, der Benutzer kann auch das hochladen von youtube-videos in einem regulären 3:4-format und vielleicht andere youtube zulässigen Formate, und in diesem Fall denke ich nicht, dass die Bilder über die schwarzen Balken.
- um die schwarzen Balken verschwinden, können Sie
margin
*just sayin' - Nun ja, @gamehelp16... Aber bitte Lesen Sie den Kommentar zwei Kommentare bis.
- Es ist möglich,. Check meine Antwort.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gemäß der API-Dokumentation:
So gibt es ein Bild, das für jeden video-Auflösung (die ich getestet habe, mindestens), die im 16:9-format. Natürlich ist es nicht das größte Bild auf dem Planeten...
Wenn die Größe ist ein Problem, und Sie erfordern etwas größer, als die beste option wirklich wählen Sie eine der verfügbaren Optionen, ist immer im 4:3 Verhältnis, und blenden Sie das überschüssige mit CSS. YouTube selbst hat dies getan, für eine lange Zeit. Sie nutzen mehrere thumbnail-Größen, die über Ihre Website jetzt, einschließlich
mqdefault.jpg
.Es ist wirklich einfach sich zu verstecken überschüssige Breite und/oder Höhe eines Bildes, wenn alle Maße bekannt sind. Hier ist ein Beispiel mit einem 4:3-Bild von YouTube mit den schwarzen Balken versteckt, so dass ein 16:9-Ergebnis. Die CSS auskommentiert ist für Ihren Genuss.
YouTube bietet Bilder, die nicht das Seitenverhältnis von 4:3 schwarze Streifen. Um ein 16:9 video-thumbnail ohne schwarze Streifen, versuchen Sie eine dieser:
Den ersten
mqdefault
kommt als 320x180 pixel-Bild.Den zweiten
maxresdefault
kommt als 1500x900 pixel-Bild, so würde es die Größenänderung müssen als thumbnail. Dies ist ein schönes Bild, aber es ist nicht immer verfügbar. Wenn das video ist von minderer Qualität (weniger als 720p würde ich mir vorstellen, nicht ganz sicher) dann ist dieses 'maxresdefault' nicht mehr verfügbar ist. Also nie darauf verlassen.1500x900
aber die maximale Auflösung des Videos (es könnte sein, 1280 x 720, 1920 x 1080 und mehr)...Nach der Suche im net eine Weile fix für dieses Problem kam ich mit nichts, ich glaube, ich habe alles versucht und nichts mein problem gelöst. Dann angetrieben durch meine Logik, die ich nur mit der iframe, der das eingebettete youtube-video in ein div gesetzt overflow: hidden; zu diesem div-Element und machte seine Höhe 2px kleiner als die iframe-Höhe (auf mein video es war schwarzer Rand unten).
Also das wrapper-div ist kleiner als das iframe, und positionieren Sie es über das video, das Sie ausblenden können die schwarzen Ränder, die Sie nicht wollen.
Ich denke, dass dies die beste Lösung von allem, was ich bisher ausprobiert habe.
Aus diesem Beispiel unten versuchen, die Einbettung nur der iframe, und Sie werden sehen, die kleinen schwarzen Rand an der Unterseite, und wenn Sie wickeln Sie den iframe in das div die Grenze ist Weg, weil das div-Element überlappen der iframe, und es ist kleiner als das video, und es hat overflow: hidden, also alles, was geht aus den div Abmessungen verborgen ist.
In meinem Fall war die Grenze mit ca 2px Höhe, so habe ich das wrapper-div-2px kleiner in der Höhe zu verstecken, die Grenze, in deinem Szenario, wenn die Grenze auf der Oberseite des Videos oder auf den Seiten und/oder mit unterschiedlichen Abmessungen, die Sie haben, um verschiedene Abmessungen, die für die wrapper-div-Element und positionieren Sie es gut, so dass es überschneidungen das video, wo die Grenzen sind und mit overflow:hidden; die Grenzen werden ausgeblendet.
Hoffe, das wird helfen.