Entfernen von schwarzen Rändern 4: 3 auf den YouTube-Miniaturansichten

YouTube bietet Bilder an, die keine schwarzen Streifen im Verhältnis 4: 3 aufweisen. Um ein 16: 9-Video-Miniaturbild ohne schwarze Streifen zu erhalten, versuchen Sie eine der folgenden:

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

Die erste mqdefault ist ein 320x180 Pixel großes Bild.

Die zweite Variable maxresdefault ist ein Bild mit 1500 x 900 Pixeln, daher müsste die Größe geändert werden, um als Miniaturansicht verwendet zu werden. Dies ist ein schönes Bild, aber es ist nicht immer verfügbar. Wenn das Video von geringer Qualität ist (weniger als 720p, glaube ich nicht genau), ist dieser 'maxresdefault' nicht mehr verfügbar. Verlassen Sie sich also niemals darauf.

Wenn Sie es mit einer flexiblen Breite wünschen, verwenden Sie Folgendes:

HTML

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

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}

Um den black borders aus dem Youtube thumbnail zu entfernen, müssen wir keinen seperate code oder CSS schreiben. Verwenden Sie einfach die ytimg.com-Site, die für YouTube image steht, die fetches die Bilder von YouTube, wie thumbnails und icons, die von dieser Domäne stammen, benötigt.

Beispiel unten -

Originalbild [Mit Rahmen]

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

Ohne Ränder/Streifen

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

OR

2. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg

Wie macht es YouTube? Es gibt viele Parameter in der Image-URL.

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

Dies ist eine Antwort, die ich für eine ähnliche Frage gegeben habe, aber sie wird Ihr Problem vollständig lösen. Schneiden Sie einfach alles aus dem Video, das nicht mit dem Wrapper-div angezeigt werden soll. Dies geschieht mit HTML und CSS.

Nachdem ich das Netz eine Weile nach der Behebung dieses Problems gesucht hatte, kam mir nichts, ich glaube, ich habe alles versucht und nichts gelöst. Dann, getrieben von meiner Logik, wickelte ich einfach den iframe des eingebetteten Youtube-Videos in einen Div-Set-Überlauf ein: hidden; um dieses div und seine Höhe um 2px kleiner als die iframe-Höhe (auf meinem Video befand sich ein schwarzer Rand unten) . Der Wrapper div ist also kleiner als der iframe, und wenn Sie ihn über dem Video positionieren, können Sie das Schwarz ausblenden Grenzen, die Sie nicht wollen ... Ich denke, das ist die beste Lösung von allem, was ich bisher ausprobiert habe.

Versuchen Sie in diesem Beispiel unten, nur den iframe einzubetten, und Sie sehen unten einen kleinen schwarzen Rand. Wenn Sie den iframe in das div einfassen, ist der Rand weg, da das div den iframe überlappt und kleiner als das Video und das Video ist hat Überlauf: ausgeblendet, sodass alles, was aus den Div-Dimensionen herauskommt, ausgeblendet wird.

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

In meinem Fall war der Rand etwa 2px hoch, also habe ich den Wrapper div 2px in der Höhe verkleinert, um den Rand auszublenden, in Ihrem Szenario, wenn der Rand oben auf dem Video oder an den Seiten und/oder mit unterschiedlichen Abmessungen liegt Sie müssen verschiedene Dimensionen für den Wrapper div festlegen und ihn so positionieren, dass er das Video überlappt, wo sich die Ränder befinden, und mit Überlauf: hidden; Die Grenzen sind verborgen.

Hoffe das wird helfen.

Ich bin kein Experte, ich habe nach einer Lösung gesucht, um die schwarzen Balken von Youtube-Video-Thumbnails zu entfernen, habe ein paar Lösungen gefunden, aber für mich nicht funktioniert. Ich fing an, mit den Lösungen zu experimentieren, die ich gefunden hatte, und kam dazu.

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>