web-dev-qa-db-fra.com

Suppression des bordures noires 4: 3 sur les miniatures youtube

Par exemple. J'ai un lien

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

pour une miniature de vidéo youtube:

enter image description here

Et je voudrais supprimer les bordures supérieure et inférieure noires pour obtenir une image comme celle-ci:

enter image description here

Cela pourrait-il être fait en utilisant la fonction PHP javascript/jQuery ou peut-être youtube api elle-même?

phpjavascriptjqueryyoutube-api
41
Derfder

Utilisez-le comme image d’arrière-plan, centrez-le et changez 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;
}
16
Rich Bradshaw

YouTube propose des images sans bandes noires au format 4: 3. Pour obtenir une vignette vidéo 16: 9 sans bandes noires, essayez l’une de ces options:

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 se présente sous la forme d’une image de 320 x 180 pixels.

La seconde maxresdefault se présente sous la forme d’une image de 1 500 x 900 pixels; elle aurait donc besoin d’être redimensionnée pour pouvoir être utilisée comme une vignette. C'est une belle image mais elle n'est pas toujours disponible. Si la vidéo est de mauvaise qualité (moins de 720p, j'imagine, je ne suis pas tout à fait sûr), alors cette erreur "maxresdefault" n'est plus disponible. Donc, ne comptez jamais dessus.

88
TheCarver

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

HTML

<div class="thumb">
    <img src="...">
</div>

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}
11
Sergi Ramón

Pour supprimer le black borders du Youtube thumbnail, il n'est pas nécessaire d'écrire un seperate code ou CSS. Utilisez simplement le site ytimg.com, qui signifie YouTube image, qui fetches les images de YouTube, telles que thumbnails et icons, si nécessaire, qui proviennent de ce domaine.

Exemple ci-dessous -

Image originale [Avec des bordures]

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

Sans bordure ni bande

  1. http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg

OR

  1. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
7
PB-BitWiser

Comment youtube le 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
1
Gino

C’est la réponse que j’ai donnée pour une question similaire, mais cela résoudra complètement votre problème. Il suffit de couper tout ce que vous ne voulez pas voir apparaître dans la vidéo avec l’emballage div, c’est fait avec html et css.

Après avoir cherché quelque temps sur le net pour trouver une solution à ce problème, je n'ai rien trouvé, je pense avoir tout essayé et rien n'a résolu mon problème. Puis, motivé par ma logique, je viens d’envelopper l’iframe de la vidéo youtube incorporée dans un débordement d’un div set: hidden; à cette div et fait sa hauteur 2px plus petite que la hauteur de l'iframe (sur ma vidéo il y avait une bordure noire en bas) . Ainsi, la div wrapper est plus petite que l'iframe et en le plaçant sur la vidéo, vous pouvez masquer le noir Des frontières que vous ne voulez pas… Je pense que c'est la meilleure solution parmi tout ce que j'ai essayé jusqu'à présent.

Dans cet exemple, essayez d’incorporer uniquement l’iframe et vous verrez une petite bordure noire en bas. Lorsque vous encapsulez l’iframe dans le div, la bordure disparaît, car la div chevauche l’iframe et est plus petite que la vidéo. a débordement: masqué de manière à masquer tout ce qui sort des dimensions div.

<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 bordure avait une hauteur d’environ 2 pixels et j’ai donc réduit l’emballage div de 2 pixels en hauteur pour masquer la bordure. Dans votre scénario, si la bordure se trouve en haut de la vidéo ou sur les côtés et/ou de doivent créer différentes dimensions pour la div de l’emballage et la positionner correctement afin qu’elle chevauche la vidéo là où se trouvent les bordures et avec le débordement: hidden; les frontières sont cachées.

J'espère que cela aidera.

0
dekiss

Je ne suis pas un expert, je cherchais une solution pour supprimer les barres noires des vignettes de vidéos youtube, j'ai trouvé quelques solutions mais cela n'a pas fonctionné pour moi. J'ai commencé à expérimenter les solutions que j'ai trouvées et à proposer cela.

https://jsfiddle.net/1fL2ubwy/


.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;
}
<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>

0
Sampath Kumar