YouTubeギャラリーを作成「Youtube video gallery」
当ページのリンクには広告が含まれています。
スポンサーリンク
YouTubeギャラリーを作成「Youtube video gallery」を作成するjQueryプラグイン「Youtube video gallery」を紹介します。
jQueryプラグイン「Youtube video gallery」
「Youtube video gallery」は、YouTubeのリンクURLとリストタグだけで簡単にYouTubeのギャラリーが作成できるプラグインです。しかも、動画がページ遷移をせずにLightbox形式で閲覧出来ます。
スポンサーリンク
デモをご覧ください。YouTubeギャラリーが楽しめます。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Youtube video gallery のデモでーす。">
<title>Youtube video gallery - jQuery Plugin Demo</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="jquery.youtubevideogallery.js"></script>
<link rel="stylesheet" href="youtube-video-gallery.css" type="text/css"/>
<style>
#container {margin: 0 auto;width:600px;}
</style>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/youtube-video-gallery/">「jQueryプラグインまとめ」に戻る</a></p>
<div id="container">
<h1>YouTube ぎゃらり〜</h1>
<ul class="youtube-videogallery">
<li><a href="http://www.youtube.com/watch?v=Vif2_wLBTlU">Creative Commons - Puffy clouds and Trees Time Lapse</a></li>
<li><a href="http://www.youtube.com/watch?v=0JQ1UwjneNI">Time Lapse Aurora Borealis January 2012</a></li>
<li><a href="http://www.youtube.com/watch?v=cxsBvwbh5aE">Cool star fall - night sky timelapse for Creative Commons V09620e</a></li>
<li><a href="http://www.youtube.com/watch?v=HttdxjYK7EQ">Earth seen from Space (TimeLapse HD 1080p)</a></li>
<li><a href="http://www.youtube.com/watch?v=IbzuRn4Sa2c">Creative Commons - Sun Emerging From Behind the Clouds</a></li>
<li><a href="http://www.youtube.com/watch?v=YMOvz2TL78o">Creative Commons - Heavy Rainstorm in the Trees and Streets</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul.youtube-videogallery").youtubeVideoGallery( );
});
</script>
</body>
</html>
スポンサーリンク