58

たとえば、私はリンクを持っています

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

YouTube ビデオのサムネイルの場合:

ここに画像の説明を入力

そして、黒い上下の境界線を削除したいので、次のような写真が得られます。

ここに画像の説明を入力

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

4

8 に答える 8

125

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」は使用できなくなります。だから絶対に頼らない。

于 2013-09-24T10:18:26.237 に答える
21

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

http://dabblet.com/gist/4012604

.youtubePreview {
    background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
    height:204px;
    width:480px;
}
于 2012-11-04T17:03:27.743 に答える
20

柔軟な幅が必要な場合は、これを使用します。

HTML

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

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}
于 2016-07-21T14:52:35.323 に答える
0

ユーチューブのやり方。画像の 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
于 2016-06-12T19:28:42.283 に答える
0

これは同様の質問に対する回答ですが、問題を完全に解決します。ビデオから表示したくないものをすべてラッパー div で切り取るだけです。これは html と css で行われます。

この問題を解決するためにネットをしばらく検索した後、何も思いつきませんでした。すべてを試してみましたが、何も問題を解決できなかったと思います。次に、ロジックに基づいて、埋め込まれた YouTube ビデオの iframe を 1 つの div セットにラップしました。この div に追加し、高さを iframe の高さよりも 2 ピクセル小さくしました (私のビデオでは、下部に黒い境界線がありました)。したがって、ラッパー 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; でビデオと重なるようになります。境界線が隠されています。

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

于 2013-10-04T07:46:48.297 に答える
0

レスポンシブな方法が必要だったので、このコードがwindow.addEventListener("resize");

基本的には 4:3 の比率を 16:9 に変換したい

<div id="video-item">
    <img src="https://i.ytimg.com/vi/{videoId}/hqdefault.jpg" />
</div>

const videoItem = document.getElementById("video-item");
const img = videoItem.querySelector("img");

resize()
{
    img.style.top = `${-(img.offsetHeight - (img.offsetWidth * 9 / 16)) / 2}px`;
    videoItem.style.height = `${9 / 16 * videoItem.offsetWidth}px`;
}

#video-item
{
    position: relative;
    overflow: hidden;
}

#video-item img
{
    width: 100%;
    position: absolute;
}

ところで、画像の計算された高さにフォールバックすることもできます（画像が完全にロードされていない場合）

img.style.top = `${-((img.offsetHeight || (3 / 4 * img.offsetWidth)) - (img.offsetWidth * 9 / 16)) / 2}px`;
于 2021-06-26T14:53:01.263 に答える