La suppression des bordures noires 4:3 sur youtube vignettes

E. g. J'ai un lien

http://img.youtube.com/vi/aOPGepdbfpo/0.jpg

pour une vidéo youtube vignette:

Et je voudrais enlever le noir en haut et en bas de la frontière j'ai donc d'obtenir une image comme ceci:

La suppression des bordures noires 4:3 sur youtube vignettes

Pourrait-il être fait en utilisant la fonction PHP javascript/jQuery ou peut-être des api youtube lui-même?

ensemble css hauteur de l'image....
Avec PHP, vous pouvez recadrer l'image et supprimer les bords noirs comme ceci.

InformationsquelleAutor Derfder | 2012-11-04

16

L'utiliser comme image d'arrière-plan, le centre informatique et de modifier la hauteur.

http://dabblet.com/gist/4012604
```
.youtubePreview {
    background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
    height:204px;
    width:480px;
}
```
- J'ai édité ma question.
- Regarde la même chose pour moi... Ce qui a changé?
- J'ai supprimé html/css comme une possibilité, parce que j'ai plusieurs youtube images, pas un seul. Il ne serait exagéré pour ajouter des trucs via javascript. N'est-il pas une fonction php qui pourrait recadrer thi image en utilisant un ratio d'aspect?
- Pas sûr de savoir comment ce serait un problème? Il suffit de régler l'arrière-plan de la propriété inline comme <div style='background:url('blahblahblah') center no-repeat;'></div>, au lieu d'utiliser une balise img. À l'aide de PHP pour la récolte, il est possible, mais est beaucoup plus de ressources que l'aide de CSS. Rappelez-vous PHP aurait besoin de récupérer l'image sur internet, le décompresser dans la RAM, de la recadrer, compresser, puis de les enregistrer sur un disque.
- Eh bien, si aucune autre solution ne sera donné que je vais utiliser ta réponse. Cependant, je vais attendre d'autres réponses d'un couple de minutes.
- Je ne suis pas un fan de css, mais comme je l'ai écrit, je vais attendre un peu et si rien de mieux s'affiche, je vais utiliser votre solution.
- Une autre solution serait de définir négatif marges supérieure et inférieure de l'image et de définir overflow: hidden sur l'image contenant. Quelque chose comme ceci dabblet.com/gist/4012647
- Le problème est que je ne peux pas redimensionner l'image pour mes petites vignettes sur ma page. Je suis vignette de youtube à partir d'un lien img.youtube.com/vi/aOPGepdbfpo/0.jpg qui est plus grand par exemple, 480x360. Mais si je suis en utilisant votre solution pour la plus petite de mes images sur le site web (190x100) l'image n'est pas redimensionnée comme lorsque j'utilise par exemple width="190" height="100" lors de l'utilisation de la balise img. Balise Div ne peut pas faire quelque chose comme ça. Des conseils comment faire pour obtenir l'image redimensionnée et ensuite la recadrer?
- Vous pouvez utiliser de fond de taille, mais d'une bien meilleure façon serait de faire ce que Ana suggéré ci-dessus.
- Oui, le fond de la taille a aidé 😉
- Juste une remarque; de vérifier la compatibilité de background-size avant de l'utiliser. Pensez IE9+, c'est ok, mais les versions antérieures d'échouer. Safari a certaines limites à cette fonctionnalité aussi. caniuse.com/background-img-opts.
InformationsquelleAutor Rich Bradshaw
94

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.
- Est-il un paramètre à fournir cette version dans la vidéo du propriétaire de configuration? J'obtiens une erreur 404 quand j'ai essayer cette URL avec la cible de la vidéo id. Les autres tailles de travail.
- bon point. Pas trop sûr de tous les paramètres. C'est l'emplacement de l'image que j'utilise sur nos propres vidéos, qui sont de haute qualité, et ne manquent jamais de produire cette image. Je voudrais faire une supposition que si les vidéos ne sont pas de qualité suffisante pour produire de la 1500px x 900px, alors l'image ne peut pas être créé. Vous pouvez créer une procédure de secours, de sorte que si l'image n'est pas disponible, puis faire un peu de funky CSS pour cacher les bandes noires.
- j'adore quand les solutions sont aussi simple que cela! merci pour cette réponse -- il m'a sauvé beaucoup de temps qui aurait été passé à former des wrappers et le css pour aller avec elle -- et aucune des autres réponses/commentaires mentionnent même qu'ils se cassent dès que le responsive design est considéré (sans l'aide de pourcentages)
InformationsquelleAutor TheCarver
11

Si vous le souhaitez avec une largeur flexible, utilisez ceci:

HTML
```
<div class="thumb">
    <img src="...">
</div>
```
CSS
```
.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}
```
- Cela a très bien fonctionné pour mon cas d'utilisation avec des variables et adaptés vidéo largeurs.
- c'était la meilleure réponse à mon avis. heureux, je défile vers le bas.
InformationsquelleAutor Sergi Ramón
7

Pour supprimer le black borders de la Youtube thumbnail nous avons besoin de ne pas avoir à écrire un seperate code ou CSS. Utilisez simplement le ytimg.com site, qui est YouTube image, qui fetches les images de YouTube, comme thumbnails et icons comme nécessaire, qui proviennent de ce domaine.

Exemple montré ci-dessous -

Image d'origine [Avec les frontières]

http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg

Sans frontières/Bandes
1. http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg
OU
1. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
- C'est une distinction importante qui N'est pas clairement documentée
- hqdefault n'est pas l'image d'origine, maxresdefault est, mais cette taille d'image n'est pas toujours disponible, il est également sddefault qui est entre maxres et de l'ac
InformationsquelleAutor PB-BitWiser
1

Comment youtube faire. Il y a beaucoup de paramètre dans l'url de l'image.
```
https://i.ytimg.com/vi/XkOpbLBzPsY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo
```
- qu'est-ce que le soupir=Gv-oyTIgA39e7UG01pZ2RiGbwSo dans ce contexte?
InformationsquelleAutor Gino
0

C'est la réponse que j'ai donné pour la même question, mais il permettra de résoudre votre problème complètement, il suffit de couper tout ce que vous ne voulez pas être montré à partir de la vidéo avec l'enveloppe div, c'est fait avec html et css.

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.

InformationsquelleAutor dekiss

Je ne suis pas un expert, je cherchais une solution pour enlever les barres noires de la vidéo youtube vignettes, trouvé quelques solutions, mais n'a pas fonctionné pour moi. A commencé à expérimenter avec les solutions que j'ai trouvées et est venu avec cette.

https://jsfiddle.net/1fL2ubwy/

CSS:

.row, .col, [class*="col-"] {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.yt-thumb {
    width: 100%;
    height: 74%;
    overflow: hidden;
}
.yt-thumb > img {
    margin: -10% 0;
}

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css">


<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
      </a>
    </div>
    
    <div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
      <a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
        <img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
       </a>
    </div>
  </div>  
</div>

InformationsquelleAutor Sampath Kumar

Vous devez vous connecter pour publier un commentaire.