jquery.youtubeGallery.jsを使って複数のYouTube動画をギャラリーを表示してみます。
メインYouTube動画のサムネイルが表示され、下のサムネイルをクリックするとメインYouTube動画が切替ります。
Contents
YouTube動画ギャラリーを表示するCSSの記述
※jquery.youtubeGallery.cssファイルを読み込みます。必要に応じて変更して下さい。
<link rel="stylesheet" type="text/css" href="jquery.youtubeGallery.css" /> <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } .clWrap{ width:800px; margin:0 auto; } .ytg_player { margin : 0 0 1px; } .ytg_thumbnails img { margin : 0 1px 5px 1px; height : 50px; } --> </style>
jquery.youtubeGallery.jsを使ってYouTube動画ギャラリーを表示するJavaScriptの記述
※jquery-2.2.0.min.js、jquery.youtubeGallery.jsファイルを読み込みます。$().youtubeGallery()でYouTube動画ギャラリーを表示させたい箇所とサイズ・YoTubeのURLを指定します。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.youtubeGallery.js"></script> <script type="text/javascript"> jQuery(function( $ ) { $('#youtube').youtubeGallery( { width: '480', // 動画の幅 height: '320', // 動画の高さ speed: '1000', // フェードのスピード // YouTubeのURL urls:['https://www.youtube.com/watch?v=AbPED9bisSc', 'https://www.youtube.com/watch?v=WA4iX5D9Z64', 'https://www.youtube.com/watch?v=AAbokV76tkU', 'https://www.youtube.com/watch?v=fWNaR-rxAic', 'https://www.youtube.com/watch?v=T4cdfRohhcg', 'https://www.youtube.com/watch?v=AgFeZr5ptV8', 'https://www.youtube.com/watch?v=Y1xs_xPb46M'] } ); } ); </script>
YouTube動画ギャラリーを表示するHTMLの記述
※必要に応じて変更して下さい。
<div class="clWrap"> <h1>URLを指定したYouTube動画のギャラリーを表示します。<br> サムネルをクリックするとメイン動画が切替ります。</h1> <div align="center" id="youtube"></div> </div><!--/clWrap-->
YouTube動画のギャラリーを表示するデモページ
ソース元:jquery.youtubeGallery.js
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告