YouTube と 移動を自由にする jQyery

★　ランのカスタマイズ日記にあるウサギを移動すると
　　YouTube　がポップアップされ再生されるスクリプトについて


◆　画像は下記です。





★　ランのカスタマイズ日記では、下記の記事で紹介しています。

①　移動を自由にするスクリプト(jQuery)
②　ビデオボックス(Video Box)　アメブロ


●　やり方

①　フリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
var v_border_px = 40; // ★①　動画枠の幅(px)
var v_border_color = "#ffffff" // ★②　動画枠の色(#色コード)
var v_fade_in_time = "2000"; // ★③　表示時間 (ミリ秒)
var v_fade_out_time = "1000"; // ★④　消去時間 (ミリ秒)
var v_close_video='http://stat.ameba.jp/user_images/20101111/01/new-bulue9/87/80/p/o0105004010852331277.png';// ★⑤　Close画像
var v_back_color = "#000000"; // ★⑥　全体背景色(#色コード)
var v_back_parent = 0.9; // ★⑦　全体背景透過度(0～1.0)
var v_ani_sw = "ON"; // ★⑧　アニメーション (ON 又は OFF)
var video_w = 640; // ★⑨　動画の幅 (px)
var video_h = 390; // ★⑩　動画の高さ(px)
var a_play = "&autoplay=1"; // ★⑪　自動再生( 0 手動　1 自動)
var color1 = "&color1=0xff00ff"; // ★⑫　色１　境界線メイン色(0x色コード)
var color2 = "&color2=0xff00ff"; // ★⑬　色２　背景色と境界線副色(0x色コード)
var p_rel = "&rel=0"; // ★⑭　関連する動画を含めるか(1 含める)
window.onload = function(){VideoBox();}
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/68/2d/10018015921.css"></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b5/1a/10017432899.css"></script>
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript">j$(function(){j$("#usagi").easydrag();});</script>

②　フリースペースに追記する

<div id="usagi" style="position: absolute; left: 0px; top: 420px; z-index: 10000; cursor: move;"><a href="http://www.youtube.com/watch?v=gZt_mvfD72c&feature=fvst" style=""><img src="http://stat.ameba.jp/user_images/20101231/18/new-bulue9/39/78/p/o0209022110953182787.png"></a>
　　　　　　　　　移動させて見てね！
</div>

★　説明
・　下記は、フリープラグインの最初に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
・　ベーシックスキンとの違いは下記の黄色い部分です。

<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript">j$(function(){j$("#usagi").easydrag();});</script>

ベージックスキンの場合は、上記部分は、下記の様になります。

<script type="text/javascript">$(function(){$("#usagi").easydrag();});</script>


・　下記はビデオボックスが入ったファイルを指定しています。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/68/2d/10018015921.css"></script>


★　上記の黄色い部分は、Mootools.js とのコンフリクトを避ける記述に
　　なっています。

尚、ベーシクスキンでも上記は、そのまま使用可能です。