web-dev-qa-db-ja.com

YouTubeのサムネイル画像に再生ボタンを重ねる方法

私が取り組んでいるプロジェクトでは、メディアチームがデータベースに公開しているYouTubeビデオをまとめて、関連コンテンツとして提示できるようにします。

できることは、生成されたYouTubeサムネイルの上に再生ボタンをオーバーレイすることです。これにより、サムネイルが再生可能なビデオを表していることがより明確になります。

私はこれを達成するための最良の方法を探しています-私はいくつかの検索を行いましたが、誰もこれに興味がありません、それを行う方法は本当に明白であるか、正しい検索用語を見つけるのに苦労しています。

私がこれまでに思いついた方法は次のとおりです。

  1. 背景画像を再生するコンテナdivを使用し、サムネイルの不透明度を下げて、サムネイルの上に再生ボタンを表示します。余分なdivがあるため、私はこれの大ファンではありません。IEでは機能しないようです。
  2. Photoshopでサムネイルをバッチ処理し、再生ボタンを持つようにサムネイルを変更します。私たちは毎晩ビデオをプルダウンしているので、これはやや不幸でしょう。そのため、再生ボタンのないビデオもあるでしょう。
  3. インポートプロセスを変更して、再生ボタンで新しいサムネイルを動的に生成します。これにより、上記の両方の問題が修正されますが、実行がより困難になります。

クラスを画像に追加し、javascriptやCSSを使用して画像をオーバーレイできるようにしたいと思っていました。

誰かがこれについて何かアドバイスをしてくれたら、本当にありがたいです。

現在のhtml（コメントでOPが投稿）：

<li>
    <a 
        class="youtube" 
        title="{ video id here }" 
        href="youtube.com/watch?v={video id here}">
             <img 
                 src="i3.ytimg.com/vi{ video id here }/default.jpg" 
                 alt="{ video title here }" />
    </a><br /> 
    <a 
        class="youtube" 
        title="{vide id here }" 
        href="youtube.com/watch?v={ video id here }">
             { video title here }
    </a>
</li>
jquerycssyoutubephotoshop
28
someoneinomaha
<div class="video">
    <img src="thumbnail..." />
    <a href="#">link to video</a>
</div>

css

.video { position: relative; }

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 20px;
   left: 20px;
}

私はそのようなことをするでしょう。いずれにせよ、画像を後処理して再生ボタンを追加することはお勧めできません。たとえば、ボタンのデザインを変更する必要がある場合はどうなりますか？

ボタンを中央に配置したい場合は、上と左を50％に設定し、ボタンのサイズの半分に等しい負のマージンを追加するのが良い方法です。

.video a {
   position: absolute;
   display: block;
   background: url(url_to_play_button_image.png);
   height: 40px;
   width: 40px;
   top: 50%;
   left: 50%;
   margin: -20px 0 0 -20px;
}
37
Robin

追加のHTMLマークアップなしで多くの柔軟性を提供する1つの方法（イメージオーバーレイについて尋ねられるときに提案されるほとんどのソリューションとは対照的に）は、:after CSSセレクターを使用することです。各画像の周りに「ビデオ」クラスのdivがあると仮定すると、次のようになります：

.video:after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 120px;
    z-index: 100;
    background: transparent url(play.png) no-repeat center;
    pointer-events: none;
}

スタイルシートの残りの部分に応じて、必要に応じてwidth、height、およびz-indexの値を編集します。これは、キャプションを保持するために使用されるdivなど、他のコードに干渉することなく適切に機能します。

追加のスナズにホバーセレクターを追加します。

.video:hover:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 150px; 
    height: 120px; 
    z-index: 100; 
    background: transparent url(play_highlight.png) no-repeat center; 
    pointer-events: none; 
}
18
otravers

短く、きれいで、完全にレスポンシブで、余分なHTMLはありません：

<a class="youtube" href="http://youtube.com/watch?v={video id here}">
    <img src="http://i3.ytimg.com/vi/{video id here}/default.jpg" alt="{ video title here }" />
</a>

CSS：

.youtube {
    position: relative;
    display: inline-block;
}
.youtube:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent url({play icon url here}) center center no-repeat;
}

PS：background-sizeから.youtube:beforeスタイル。

例えば：

.youtube:before {
    background-size: 30%;
}
4
Dima L.

サービスを使用することもできます

http://halgatewood.com/youtube/

このように： http://halgatewood.com/youtube/i/youtube_id.jpg （Amazonにリダイレクト）

例： http://halgatewood.com/youtube/i/aIgY20n3n0Y.jpg （Amazonにリダイレクト）

編集：

サービスが停止された、あまりにも多くの人々が彼を砲撃したと思います:)今それはgithub上にあります

https://halgatewood.com/easily-add-play-buttons-to-youtube-video-thumbnails/ （リンク切れ） https://github.com/halgatewood/youtube -thumbnail-enhancer

同じことを行う別のサービスを次に示します（muktesh patelが提案したとおり）。

http://www.giikers.com/iwc

4
Timo Huovinen