Je peux facilement obtenir une vignette de l'image YouTube avec les liens décrits ici: Comment puis-je obtenir une vignette vidéo YouTube de l'API YouTube?
Mais toutes ces vignettes sont au format 3: 4 (ou quelque chose de fermeture), même si la vidéo elle-même est dans un autre format. Ensuite, des barres horizontales noires sont simplement visibles en haut et en bas de la photo.
J'ai besoin d'une image au format 9:16 (qui est mon format vidéo) sans barres noires. Est-ce que cela est possible de récupérer?
Il semble que la vidéo YouTube a également une barre noire en haut et en bas, même s'il n'y a pas de barres noires sur la vidéo sur la page YouTube.
Toute façon de montrer simplement la vignette ainsi que la vidéo au format correct?
3 Réponses :
par la documentation de l'API:
la balise qui a une valeur d'attribut YT: nom de nom de MQDefault identifie une image de vignette 320x180 (16: 9). Cette image n'a pas non plus d'horodatage et pourrait être de tout point de la vidéo.
Il y a donc une image disponible pour chaque résolution vidéo (que j'ai testée, au moins) au format 16: 9. Bien sûr, ce n'est pas la plus grande image de la planète ...
Si la taille est un problème et que vous avez besoin de quelque chose de plus grand, que la meilleure option est vraiment de choisir l'une des options disponibles toujours dans 4: 3 et masquez l'excédent en utilisant CSS. YouTube lui-même l'a fait pendant une longue période . Ils utilisent des tailles de miniatures multiples sur leur site maintenant, y compris
mqdefault.jpg .Il est vraiment facile de masquer l'excès de largeur et / ou de la hauteur d'une image lorsque toutes les dimensions sont connues. Voici un exemple en utilisant une image 4: 3 de YouTube avec les barres noires cachées, laissant un résultat de 16: 9. Le CSS est commenté pour votre plaisir.
Merci. Je commence à réaliser que cacher les barres est le moyen de le faire.
Existe-t-il une solution pour cela pour un site réactif, où la hauteur et la largeur sont flexibles?
Je cherche également une solution, @Mortenhjort - Avez-vous trouvé quelque chose?
@Prefix: pas une solution appropriée. Theres beaucoup de hacks là-bas, mais pas de solution parfaite :(
@Mortenhjort Bummer :( Avez-vous fini par aller avec l'un des hacks de culture pour cacher les barres noires?
Non malheureusement, ils sont toujours là: Musik.dk/u2 appris à vivre avec elle, jusqu'à ce qu'une solution appropriée soit fabriqué.
YouTube propose des images qui ne possèdent pas les bandes noires 4: 3 ratio. Pour obtenir une vignette vidéo de 16: 9 sans bandes noires, essayez l'une d'entre elles: Le premier Le second mqdefault est une image de 320x180 pixel. maxresdefault est une image de pixel de 1500x900, il aurait donc besoin de redimensionner pour utiliser une vignette. C'est une belle image mais ce n'est pas toujours disponible. Si la vidéo est de mauvaise qualité (moins de 720p, j'imagine, pas exactement sûr) alors ce "maxResdefault" devient indisponible. Donc, ne reposez jamais dessus.
Comme vous l'avez mentionné, MaxRes n'est pas toujours disponible, il n'est pas non plus 1500x900 mais la résolution maximale de la vidéo (elle pourrait être 1280x720, 1920x1080 et plus) ...
Après avoir cherché le net A pendant la réparation de ce problème, je ne sais rien, je pense avoir tout essayé et rien n'a résolu mon problème. Puis entraîné par ma logique, je viens d'envelopper l'iframe de la vidéo YouTube intégrée dans une divulgation de division DIV: cachée; à cette div et a fabriqué la hauteur 2px plus petite que la hauteur de l'iframe (sur ma vidéo, il y avait une bordure noire dans le fond). Donc, le wrapper div est plus petit que l'iframe et le positionnant sur la vidéo que vous pouvez cacher les bordures noires que vous ne voulez pas. Je pense que c'est la meilleure solution de tout ce que j'ai essayé jusqu'à présent.
À partir de cet exemple ci-dessous, essayez d'intégrer l'iframe et vous verrez une petite bordure noire en bas et lorsque vous enveloppez l'iframe dans la frontière DIV. est parti, car la div se chevauche l'iframe et il est plus petit que la vidéo, et il a débordement: caché de sorte que tout ce qui sort des dimensions DIV est caché. P>
<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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&version=2;yt:quality=high;" frameborder="0" allowfullscreen></iframe>
</div>
C'est la réponse que j'ai terminée en utilisant pour vous débarrasser de la gamme noire stupide lorsque vous utilisez une vignette personnalisée qui imite un look de culture PNG. Il est daté de 2013 et il n'y a rien de plus récent que celui-ci sur Google n'importe où, mais cela fonctionne.
Une des solutions, je peux penser à faire des vignettes dans le format 9:16 et à le télécharger séparément. Bien que ce soit un travail impraticable.
Oui, bien sûr :) Mais pas la manière la plus utilisée pour un utilisateur ajoutant sa vidéo.
Pouvez-vous penser à redimensionner l'image pour répondre aux exigences? Un type de chose d'imagecache séparé?
@ Tuxnani: Je ne sais pas ce que vous entendez par imagecache ... mais l'image ne peut pas simplement être redimensionnée. Si je devais aller de la sorte, alors le recadrage serait nécessaire.
@Steeven Vous mentionnez votre convivialité, faites-vous quelque chose pour un site utilisateur multiple? Un site de blog? Pouvez-vous être plus précis sur ce que vous devez faire, je peux penser à une ou deux façons de le faire.
@Adambrown. Un utilisateur colle l'URL pour une vidéo YouTube dans un champ de texte et l'enregistre à la base de données. De cette URL, je récupère l'ID vidéo. J'utilise ensuite cet identifiant pour un lien comme
http://img.youtube.com/vi/ /hqdefault.jpg pour afficher une image de démarrage pour la vidéo. Mon point ci-dessus est juste que je ne veux pas que l'utilisateur crée et télécharge une image de départ. Je veux dire que cela dépend également de la façon dont vous voulez montrer l'image. Vous pouvez faire quelque chose comme l'importer sur votre site et le redimensionner à l'aide de PHP. Ou vous pouvez le définir comme arrière-plan d'un div puis forcer la DIV à une certaine taille?
Ceci est probablement facile pour vous, mais le genre de chose que je pense elated.com/articles/add-image-uploading-a-your-cms
Bien oui d'accord, mais comment puis-je savoir s'il y a un bar noir ou non? Et aura-t-il toujours la même hauteur? Je veux dire, l'utilisateur peut également télécharger des vidéos YouTube dans un format de 3: 4 régulier et peut-être d'autres formats autorisés YouTube et, dans ce cas, je ne pense pas que les images ont ces barres noires.
Pour faire disparaître les barres noires, vous pouvez utiliser
marge * juste dire "Bien oui, @ gamehelp16 ... mais s'il vous plaît lisez le commentaire deux commentaires vers le haut.
C'est possible. Vérifiez ma réponse.