動画サムネイル画像に再生アイコンをCSSで上乗せして何かそれっぽくする方法
どうもpei(@pei_babo)です。
見せ方って重要ですよね。
ノンデザイナーな私も少しでも見せ方を上手くしたいわけです。
あとYouTubeの動画タグを何個も同じページに配置すると読み込みに時間がかかってしまってあまり良い感じではありません。
出来ればYouTubeのサムネイルだけ取ってきて、ここ押すとどう見ても動画が再生します、みたいにしたいわけです。
そういうわけで今日は動画のサムネイル画像の上に再生アイコンをCSSで上乗せしてちょっとそれっぽくする方法を紹介します。
こういうやつね。
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
①再生アイコンを手に入れる
再生アイコンなど簡単に作れるよ！という方はこの章は無視して構いません。
フォトショとか使えないしアイコンとかどうやって作るんだい…という私のような方は、まずは下記のようなサイトから自分の使いたい再生アイコンをダウンロードしてきましょう。
PNG形式をダウンロードしましょう。
もし透過されていないアイコンを使用する場合は、下記の投稿にmacで簡単に透過画像ファイルを作成する方法が書かれていますので参考にして下さい。
②YouTubeのサムネイル画像を取ってくる
ご存知の方も多いかと思いますが、YouTubeのサムネイル画像はめちゃくちゃ簡単に取ってこれるようにYouTubeが用意してくれてます。
例えばYouTubeの動画のURLが「https://www.youtube.com/watch?v=QZ1poicuB2s」だとしたらv=の後の11字の文字列がYouTubeの動画IDになります。
それを下記の「ここに動画ID」と書かれた部分に埋め込めばサムネイル画像を簡単に使用できますよ。
| 1 2 3 4 5 | <!-- 画像タグテンプレート --> <img src="http://img.youtube.com/vi/ここに動画ID/mqdefault.jpg" /> <!-- 埋め込み例 --> <img src="https://img.youtube.com/vi/QZ1poicuB2s/mqdefault.jpg" /> |
こんな感じね。
③CSSでサムネイル画像の上に再生アイコンを載せる
準備が整いましたので、あとはCSSで調整していきましょう。
まずはコードを載せちゃいますね。
HTML
| 1 2 3 4 5 6 7 8 | <div class="videoBox"> <a class="video" href="http://www.youtube.com/watch?v=Y01yUsDutyo"> <img alt="アナと雪の女王動画サムネイル" src="https://img.youtube.com/vi/Y01yUsDutyo/mqdefault.jpg"> </a> <a class="play" href="http://www.youtube.com/watch?v=Y01yUsDutyo"> <img alt="再生画像" src="play.png"> </a> </div> |
CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .videoBox .play { position: relative; top: -5px; left: -190px; opacity: 0.9; } <!-- hover時処理(おまけ) --> .video { -webkit-transition: 0.5s ease-in-out; } .video:hover { opacity: 0.7; } |
画像の大きさによって再生マークが上手く真ん中に来ない場合は.videoBox .playのtopやleftを調整してくださいね。
デモ
このままでも良いのですが、YouTubeにそのまま移動するのが嫌だ！という方も多いと思いますので、デモではMagnific PopupJSを使用してそれっぽくしております。
ちなみにMagnific Popupの使い方は下記のサイトが非常に分かりやすいです。
まとめ
YouTubeをやり始めたという方も多いかと思いますので、これでサムネイルを動画っぽくして自分のサイトの表示を遅くならないように出来ると良いですね。
