Montrer la vidéo de Youtube et de vignettes dans le bon 9:16 format

Je peux facilement obtenir un Youtube vignette de l'image, avec les liens décrits ici: Comment puis-je obtenir une vidéo de YouTube, vignette de l'API YouTube?

Mais toutes ces miniatures sont dans 3:4 format (ou quelque chose d'approchant), même si la vidéo elle-même est dans un autre format. Puis quelques barres horizontales noires sont à peine visibles en haut et en bas de l'image.

J'ai besoin d'une image à 9:16 format (ce qui est mon format vidéo) sans barres noires. Est-ce possible de les récupérer?

Mise à jour

Il semble que aussi la vidéo de Youtube lui-même a des barres noires en haut et en bas, même si il n'y a pas de barres noires sur la vidéo sur la page Youtube.

Toutes les manières de simplement montrer à la fois la miniature ainsi que de la vidéo dans le bon format?

Mise à jour

J'ai trouvé ceci: La suppression des bordures noires 4:3 sur youtube vignettes

Le demandeur souhaite supprimer le noir en haut et en bas des barres. Les meilleures réponses sont ici pour ajuster la hauteur et de "cacher" les barres noires par une correction manuelle. Certains des commentaires ci-dessous suggèrent également que.
Est-ce à dire qu'il n'est pas possible de l'éviter?

L'une des solutions, je peux penser à est de créer des vignettes dans l'9:16 format et de le télécharger séparément. Mais il pourrait s'avérer peu pratique d'emploi.
Oui, bien sûr 🙂 Mais pas le plus convivial moyen pour un utilisateur en ajoutant sa vidéo.
Pouvez-vous penser de redimensionnement de l'image pour l'ajuster dans les exigences? Séparé imagecache genre de chose?
Je ne sais pas ce que tu veux dire par imagecache... Mais l'image ne peut pas être redimensionnée. Si je dois y aller, puis recadrage serait nécessaire.
Vous mentionnez convivial, faites-vous quelque chose pour un multiple de l'utilisateur du site? Un site de blog? Pouvez-vous être plus précis sur ce que vous devez faire, je crois qu'une ou deux façons de le faire.

OriginalL'auteur Steeven | 2013-03-28

  1. 8

    Par la documentation de l'API:

    La balise qui a un yt:valeur d'attribut de nom de mqdefault identifie un 320x180 (16:9) vignette de l'image. Cette image est aussi ne pas avoir un horodatage et pourrait être de n'importe quel point dans la vidéo.

    Donc, il y a une image qui est disponible pour chaque résolution vidéo (que j'ai testé, au moins) qui est au format 16:9. Bien sûr, ce n'est pas la plus grande image sur la planète...

    Si la taille est un problème, et vous avez besoin de quelque chose de plus grand, que la meilleure option est de choisir l'une des options disponibles qui est toujours en ratio 4:3, et de masquer l'excédent à l'aide de CSS. YouTube lui-même a fait cela pendant un long moment. Ils utilisent plusieurs tailles de vignettes à travers leur site, y compris mqdefault.jpg.

    Il est vraiment facile de cacher l'excès de largeur et/ou hauteur à partir d'une image lorsque toutes les dimensions sont connues. Voici un exemple d'utilisation d'une image 4:3 à partir de YouTube avec les barres noires caché, laissant un 16:9 résultat. Le CSS est commenté pour votre plus grand plaisir.

    Merci. Je commence à réaliser que de cacher les barres est la façon de le faire.
    Est-il un correctif pour ce pour un site responsive, où à la fois la hauteur et la largeur est flexible?
    Je suis à la recherche d'une solution, @MortenHjort -- avez-vous trouvé quelque chose?
    pas tout la bonne solution. Theres beaucoup de hacks, mais pas de solution parfaite 🙁
    la poisse 🙁 avez-vous vous retrouvez avec un de la de recadrage hacks de simplement masquer les barres noires?

    OriginalL'auteur Aken Roberts

  2. 15

    YouTube propose des images qui n'ont pas le 4:3 ratio des bandes noires. Pour obtenir une vidéo 16:9 miniature avec pas de bandes noires, essayez l'une de ces:

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

    La première mqdefault vient comme un 320x180 pixel de l'image.

    La seconde maxresdefault vient comme un 1500x900 pixel de l'image, de sorte qu'il aurait besoin de redimensionnement afin de l'utiliser comme vignette. C'est une belle image mais il n'est pas toujours disponible. Si la vidéo est de mauvaise qualité (moins de 720p j'imagine, pas exactement), ce "maxresdefault' devient indisponible. Donc, ne jamais compter sur elle.

    Comme vous l'avez mentionné maxres n'est pas toujours disponible, il n'est également pas 1500x900 mais la résolution maximale de la vidéo (il pourrait être de 1280 x 720, 1920 x 1080 et plus)...
    Cette réponse est vraiment sur le point et le sucré. Merci!

    OriginalL'auteur TheCarver

  3. 1

    Après avoir cherché sur le net un certain temps pour résoudre ce problème, je suis venu avec rien, je pense que j'ai tout essayé et rien n'a résolu mon problème. Alors entraîné par ma logique, je vient de terminer l'iframe de l'embedded vidéo youtube dans un div ensemble overflow: hidden; à cette div et fait hauteur 2px plus petite que la hauteur de l'iframe (sur ma vidéo il y a une bordure noire en bas).
    Si le wrapper div est plus petit que l'iframe et avec un positionnement sur la vidéo que vous pouvez masquer les bordures noires vous ne voulez pas.
    Je pense que c'est la meilleure solution à partir de tout ce que j'ai essayé jusqu'à présent.

    À partir de cet exemple ci-dessous, essayez d'incorporer juste l'iframe et vous verrez petite bordure noire en bas, et lorsque vous enroulez l'iframe dans le div de la frontière est parti, parce que le div est superposée à l'iframe et il est plus petit, alors la vidéo, et il a overflow: hidden, donc tout ce qui sort du div dimensions est caché.

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

    Dans mon cas, la frontière était à propos de 2px de hauteur, alors j'ai fait le wrapper div 2px plus petit en hauteur pour masquer la frontière, dans votre scénario si la frontière est sur le haut de la vidéo ou sur les côtés et/ou de dimensions différentes, vous avez à faire différentes dimensions de l'emballage de la div et de la position-il bon de sorte qu'il chevauche la vidéo où les frontières sont et avec overflow:hidden; les frontières sont cachés.

    Espère que cela aidera.

    C'est la réponse que j'ai fini à l'aide à se débarrasser de la bête noire de la ligne lors de l'utilisation d'une vignette personnalisée qui imite un png cultures look. Il est daté de 2013, et il n'y a rien de plus récent que sur Google n'importe où, mais cela fonctionne.

    OriginalL'auteur dekiss