Mostra i video Youtube e miniatura nel formato corretto 09:16

Question

posso facilmente ottenere un'immagine in miniatura Youtube con i collegamenti descritti qui: How do I get a YouTube video thumbnail from the YouTube API?

Ma tutte queste miniature sono in 3: 4 formato (o qualcosa di simile), anche se il video stesso è in qualche altro formato. Quindi alcune barre orizzontali nere sono appena visibili nella parte superiore e inferiore dell'immagine.

Ho bisogno di un'immagine in formato 9:16 (che è il mio formato video) senza barre nere. È possibile ritirare?

Aggiornamento

Sembra che anche il video Youtube stesso ha barre nere in alto e in basso, anche se non ci sono barre nere sul video nella pagina di Youtube.

Qualsiasi modo per mostrare semplicemente sia la miniatura che il video nel formato corretto?

Aggiornamento

ho trovato questo: Removing black borders 4:3 on youtube thumbnails

Il richiedente vuole rimuovere la parte superiore nera e le barre in basso. Le migliori risposte qui sono per regolare l'altezza e "nascondere" le barre nere mediante la correzione manuale. Alcuni dei commenti qui sotto suggeriscono anche questo.
Ciò significa che non è possibile evitare?

Answer 1

Per the API documentation:

Il tag che ha un yt: nome valore di un attributo di mqdefault identifica un 320x180 (16: 9) miniatura. Anche questa immagine non ha un timestamp e potrebbe provenire da qualsiasi punto del video.

Quindi c'è un'immagine che è disponibile per ogni risoluzione video (che ho provato, almeno) che è in formato 16: 9. Certo, non è l'immagine più grande del pianeta ...

Se la dimensione è un problema e si richiede qualcosa di più grande, l'opzione migliore è scegliere una delle opzioni disponibili che è sempre in rapporto 4: 3 e nascondi l'eccesso usando CSS. YouTube itself has done this for a long time. Utilizzano più dimensioni di anteprima sul loro sito ora, tra cui mqdefault.jpg.

È davvero facile nascondere la larghezza e/o l'altezza in eccesso da un'immagine quando tutte le dimensioni sono note. Here is an example using a 4:3 image from YouTube con le barre nere nascoste, lasciando un risultato 16: 9. Il CSS è commentato per il tuo divertimento.

Answer 2

YouTube offre immagini che non hanno il rapporto 4: 3 strisce nere. Per ottenere un video 16: 9 miniature senza strisce nere, provare uno di questi:

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

Il primo mqdefault arriva come immagine di 320x180 pixel.

Il secondo maxresdefault si presenta come un'immagine di 1500x900 pixel, quindi è necessario ridimensionarlo per l'utilizzo come anteprima. Questa è una bella immagine ma non è sempre disponibile. Se il video è di bassa qualità (meno di 720p, immagino, non esattamente sicuro), questo 'maxresdefault' diventa non disponibile. Quindi non fare mai affidamento su di esso.

Answer 3

Dopo aver cercato in rete un po 'di tempo per risolvere questo problema, non ho trovato nulla, penso di aver provato tutto e niente ha risolto il mio problema. Quindi, guidato dalla mia logica, ho appena avvolto l'iframe del video di YouTube incorporato in un div overflow del set: hidden; a questo div e ha reso altezza 2px più piccola dell'altezza iframe (sul mio video c'era il bordo nero in basso). Quindi il div wrapper è più piccolo dell'iframe e posizionandolo sul video è possibile nascondere i bordi neri che non si desidera. Penso che questa sia la soluzione migliore da tutto ciò che ho provato fino ad ora.

Da questo esempio in basso prova a incorporare solo l'iframe e vedrai un piccolo bordo nero in basso, e quando sposti l'iframe nel div il bordo è scomparso, perché il div è sovrapposto all'iframe ed è più piccolo del video, e ha overflow: nascosto così tutto ciò che esce dalle dimensioni div è nascosto.

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

Nel mio caso il confine era con circa 2px altezza così ho fatto l'involucro div 2px più piccolo in altezza per nascondere il confine, nel vostro scenario, se il confine è sulla parte superiore del video o sui lati e/o con dimensioni diverse, devi creare diverse dimensioni per il div wrapper e posizionarlo correttamente in modo che si sovrapponga al video dove sono i bordi e con overflow: nascosto; i confini sono nascosti.

Spero che questo possa essere d'aiuto.