web-dev-qa-db-ja.com

YouTubeサムネイルの黒い境界線4：3を削除する

例えば。リンクがあります

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

youtubeビデオのサムネイルの場合：

enter image description here

そして、黒の上部と下部の境界線を削除して、次のような画像を取得したいと思います。

enter image description here

PHP関数javascript/jQueryまたはyoutube api自体を使用して実行できますか？

phpjavascriptjqueryyoutube-api
45
Derfder

背景画像として使用し、中央に配置して高さを変更します。

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では、4：3の比率の黒帯のない画像を提供しています。黒いストリップのない16：9ビデオサムネイルを取得するには、次のいずれかを試してください。

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

最初のmqdefaultは、320x180ピクセルの画像です。

2番目のmaxresdefaultは1500x900ピクセルの画像であるため、サムネイルとして使用するにはサイズ変更が必要です。これは素敵な画像ですが、常に利用できるとは限りません。ビデオの品質が低い場合（正確には定かではありませんが、720p未満）、この「maxresdefault」は使用できなくなります。絶対に頼らないでください。

98
TheCarver

幅を柔軟にしたい場合は、これを使用します：

[〜＃〜] html [〜＃〜]

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

[〜＃〜] css [〜＃〜]

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

black bordersからYoutube thumbnailを削除するには、seperate codeまたはCSSを記述する必要はありません。 ytimg.comサイトを使用してください。これはYouTube imageを表し、fetchesからの画像をYouTubeから、必要に応じてthumbnailsおよびiconsのように使用しますそのドメインから。

下に示す例-

元の画像[境界線あり]

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

境界線なし/ストリップなし

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

OR

  1. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
8
Pranav Bilurkar

これは私が同様の質問に答えたものですが、あなたの問題を完全に解決し、ラッパーdivでビデオから見せたくないものをすべてカットします。これはhtmlとcssで行われます。

この問題の修正のためにしばらくネットを検索した後、私は何も思いつきませんでした、私はすべてを試してみましたが、何も私の問題を解決しなかったと思います。次に、ロジックに基づいて、埋め込みyoutubeビデオのiframeを1つのdivセットオーバーフローにラップしました。このdivの高さをiframeの高さよりも2px小さくしました（私のビデオでは、下部に黒い境界線がありました）。したがって、ラッパーdivはiframeよりも小さく、ビデオの上に配置することで、不要な黒い境界線を非表示にできます。これは私がこれまでに試したすべてのものからの最良の解決策だと思います。

以下のこの例から、iframeのみを埋め込むと、下部に小さな黒い境界線が表示されます。divでiframeをラップすると、divはiframeに重なり、ビデオよりも小さいため、境界線はなくなります。オーバーフロー：隠されているため、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>

私の場合、境界線の高さは約2pxだったので、境界線を隠すためにラッパーdivの高さを2px小さくしました。あなたのシナリオでは、境界線がビデオの上部または側面にあり、および/または異なる寸法である場合、ラッパーdivのさまざまな寸法を作成し、境界があり、overflow：hiddenでビデオと重なるように適切に配置する必要があります。境界線は非表示になります。

これが役立つことを願っています。

0
dekiss

Youtubeの仕組み。画像の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
0
Gino

私は専門家ではありません。YouTubeビデオサムネイルの黒いバーを削除するソリューションを探していましたが、いくつかのソリューションを見つけましたが、うまくいきませんでした。私が見つけた解決策を試し始め、これを思いついた。

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