ビデオギャラリー

複数の動画を、サムネイルクリックで切り替えるタイプのビデオギャラアリーである。
　このサイトでは、CSSのみでギャラリーやスライドショーを作成するという趣旨で取り組んでいるが、今回作成する動画の場合は、切り替えた時に再生をスタートさせたり、再生を停止させたりと言う動的な処理が必要になってくる。さすがに、CSSのみではこの処理が無理となってくるので、簡単なjavascriptを使ってこれを補完することにした。

サンプル（DEMO）

本サンプル表示用HTML

<input type="radio" id="r1" name="btn">
<input type="radio" id="r2" name="btn">
<input type="radio" id="r3" name="btn">
<div id="screen">
  <video id="video1" src="wp-images/video/wasibadake.mp4" width="600px" height="338px" controls></video>
  <video id="video2" src="wp-images/video/jiigatake.mp4" width="600px" height="338px" controls></video>
  <video id="video3" src="wp-images/video/hiragatake.mp4" width="600px" height="338px" controls></video>
</div>
<label for="r1"><div class="thumbs" onclick="video_play(1)"><img src="wp-images/video/wasiba_thumb.jpg"><div class="title">鷲羽岳頂上</div></div></label>
<label for="r2"><div class="thumbs" onclick="video_play(2)"><img src="wp-images/video/jii_thumb.jpg"><div class="title">爺が岳頂上</div></div></label>
<label for="r3"><div class="thumbs" onclick="video_play(3)"><img src="wp-images/video/hira_thumb.jpg"><div class="title">平が岳頂上</div></div></label>

本サンプル表示用JAVASCRIPT

/* onclickで参照されたとき引数に該当するvideoを再生しそれ以外は停止する。ここでのvideo数は3 */

function video_play(n) {
	for(var i=1; i
本サンプル表示用CSS
/* 動画表示用枠、位置の設定 */
#screen { width:600px;height:338px;background:#000;position:relative;}
#screen video { position:absolute; top:0;left:0;display:none; }
/* サムネイル・タイトル文字の設定 */
.thumbs { float:left;margin-right:6px;margin-top:5px;position:relative;}
.thumbs:hover { cursor:pointer; }
.title {
	position:absolute;top:35%;left:15%;
	color:#fff;font-weight:bold;font-size:20px;
}
.thumbs:hover > .title { color:#F45F07; }
/* ラジオボタン（非表示） */
#r1,#r2,#r3 { display:none; }
/* サムネイルクリックで該当するvideoを表示し、それ以外を非表示にする */
#r1:checked ~ #screen #video1 { display:block;}
#r1:checked ~ #screen #video2,#r1:checked ~ #screen #video3 { display:none; }
#r2:checked ~ #screen #video2 { display:block;}
#r2:checked ~ #screen #video1,#r2:checked ~ #screen #video3 { display:none; }
#r3:checked ~ #screen #video3 { display:block;}
#r3:checked ~ #screen #video1,#r3:checked ~ #screen #video2 { display:none; }