ＦＣ２ブログ用のビデオボックス | リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

ＦＣ２ブログ用のビデオボックス

★　ＦＣ２ブログ用のビデオボックス


■　この記事は、アメブロのカスタマイズの記事ではないので注意。
　　（私の覚書記事）




●　ＦＣ２ブログの場合は、プラグインに下記を追加する。
尚、クローズ画像のＵＲＬは変えてください。(88行目)


http://code.google.com/p/newblue/source/browse/FC2blog_Video_box_v2.html 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">

// ビデオボックス Version2(FC2ブログバージョン）

function VideoBox_ver2(){

// ----------------------------------------------------------------------

// ------   YouTube ビデオポップアップスクリプト Version2 ---------------

// ----------------------------------------------------------------------

$('a').click(function(e){     // a タグクリック

var href_src = this.href;

// Youtube USTREAM 対応

if((href_src.indexOf("http://www.youtube.com/watch?v=")==0)||(href_src.indexOf("https://www.youtube.com/watch?v=")==0)||(href_src.indexOf("http://www.ustream.tv/recorded/")==0)||(href_src.indexOf("http://www.ustream.tv/channel/")==0)){

// ------------ 動画ＵＲＬから video_id 決定 ------------

var Video_url,video_id;

if(href_src.indexOf("http://www.youtube.com/watch?v=")==0){

 video_id = href_src.substring(31, href_src.length);

 Video_url="http://www.youtube.com/v/";

}

if(href_src.indexOf("https://www.youtube.com/watch?v=")==0){

 video_id = href_src.substring(32, href_src.length);

 Video_url="http://www.youtube.com/v/";

}

if(href_src.indexOf("http://www.ustream.tv/recorded/")==0){

 video_id = href_src.substring(31, href_src.length);

 Video_url="http://www.ustream.tv/flash/viewer.swf";

}

if(href_src.indexOf("http://www.ustream.tv/channel/")==0){

 video_id = href_src.substring(30, href_src.length);

 Video_url="http://www.ustream.tv/flash/viewer.swf";

}

// ------------ 動画の個別指定サイズを取得 ------------

var video_wx=video_w;

var video_hx=video_h;

var size_data="";size_data = this.title;

if(size_data!=""){

var pos01=size_data.indexOf(",");

video_wx=size_data.substring(0,pos01);

video_hx=size_data.substring(pos01+1,size_data.length);

video_wx=video_wx-0;

video_hx=video_hx-0;

}

// ------------ モニターサイズを取得 ------------

var w;var h;

w   = document.documentElement.scrollWidth  || document.body.scrollWidth; // モニター横

h   = document.documentElement.scrollHeight || document.body.scrollHeight;// モニター縦

var wg=document.documentElement.clientWidth   || window.innerWidth  || self.innerWidth;

var w0=window.pageXOffset || document.documentElement.scrollLeft    || document.body.scrollLeft;

var hg=document.documentElement.clientHeight  || window.innerHeight || self.innerHeight;

var h0=window.pageYOffset || document.documentElement.scrollTop     || document.body.scrollTop;

// ------------ ポップアップ動画設定 ① (iframe)------------ 

if((href_src.indexOf("http://www.ustream.tv/recorded/")==0)||(href_src.indexOf("http://www.ustream.tv/channel/")==0)){

var ustream_a_play;var id_name;

if(a_play=="&autoplay=1"){

 ustream_a_play="&autoplay=true";

}else{

 ustream_a_play="&autoplay=false";

}

if(href_src.indexOf("http://www.ustream.tv/channel/")==0){

 id_name="cid=";

}else{

 id_name="vid=";

}

$('body').append('<p id="vbox" style="display:none;position:absolute;left:0px;top:0px;z-index:11999;background-color:#ffffff;text-align:center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-image:url(http://stat001.ameba.jp/user_images/20130813/22/new-blue-777/39/5d/g/o0128001512646403789.gif);background-repeat:no-repeat;background-position:center center;"><embed style="margin-top:'+v_border_px+'px;display:none;" src="'+Video_url+'"'+' width="' + video_wx + '" height="' + video_hx + '" flashvars="'+id_name+video_id+ustream_a_play+'&locale=ja_JP"><span id="v_close_x1"></span></p>');

}else{

$('body').append('<p id="vbox" style="display:none;position:absolute;left:0px;top:0px;z-index:11999;background-color:#ffffff;text-align:center;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-image:url(http://stat001.ameba.jp/user_images/20130813/22/new-blue-777/39/5d/g/o0128001512646403789.gif);background-repeat:no-repeat;background-position:center center;"><embed style="margin-top:'+v_border_px+'px;display:none;" src="' +Video_url+ video_id + '&hl=ja_JP&fs=0' + p_rel + a_play + '"' +  ' width="' + video_wx + '" height="' + video_hx + '"><span id="v_close_x1"></span></p>');

}

// ------------ 全体背景設定 ① ------------

$('body').append('<p id="vbox_body" style="background-color:#000000;display:none;position:absolute;left:1px;top:1px;border:none;z-index:11800;width:' + w + 'px;height:' + h + 'px;"> </p>');

// ------------ ポップアップ動画設定 ③ ------------ 

var video_wh = video_wx  / 2;          // 動画の横幅÷２ ＝ 動画配置位置(横)

var video_hh = video_hx  / 2;          // 動画の縦幅÷２ ＝ 動画配置位置(縦)

var w2=w0+wg/2;var h2=h0+hg/2;

var leftPos = (w2 - video_wh)-(v_border_px);

var topPos  = (h2 - video_hh)-(v_border_px);

var vbox_width=video_wx+v_border_px*2;

var vbox_height=video_hx+v_border_px*2;

// ------------ 全体背景設定＆表示 ------------

$('#vbox_body').fadeTo(10,v_back_parent).fadeIn(75);

// ------------ ポップアップ動画表示 ------------

$("#vbox").css("top",h2-100+"px").css("left",w2-100+"px");

$("#vbox").css("width","100px").css("height","100px").css("display","block");

$("#vbox").animate({

top:    topPos  + "px",

left:   leftPos + "px",

width:  vbox_width  + "px",

height: vbox_height + "px"},1500);

setTimeout("vboxup2()",v_fade_in_time);                           // 動画表示(徐々に)

// ------------ クローズ画像設定 ------------

$('#v_close_x1').css("cssText","background-image:url(http://blog-imgs-43.fc2.com/k/i/y/kiyo0214/o0105004010852331277.png);background-repeat:no-repeat;width:105px;height:40px;z-index:12000;display:block;float:right;display:none;");

// ------------ ウインドウリサイズ（画面の大きさを変えたとき） ------------ start

window.onresize = function() {

w=document.documentElement.scrollWidth   || document.body.scrollWidth; // モニター横

h=document.documentElement.scrollHeight  || document.body.scrollHeight;// モニター縦

wg=document.documentElement.clientWidth  || window.innerWidth  || self.innerWidth;

w0=window.pageXOffset || document.documentElement.scrollLeft   || document.body.scrollLeft;

hg=document.documentElement.clientHeight || window.innerHeight || self.innerHeight;

h0=window.pageYOffset || document.documentElement.scrollTop    || document.body.scrollTop;

var video_wh = video_wx  / 2;          // 動画の横幅÷２ ＝ 動画配置位置(横)

var video_hh = video_hx  / 2;          // 動画の縦幅÷２ ＝ 動画配置位置(縦)

var w2=w0+wg/2;var h2=h0+hg/2;

var leftPos = (w2 - video_wh)-(v_border_px);

var topPos  = (h2 - video_hh)-(v_border_px);

$('#vbox').css("top",  topPos  + "px");                           // 動画の座標位置(上) CSS

$('#vbox').css("left", leftPos + "px");                           // 動画の座標位置(左) CSS

};

// ------------ ウインドウリサイズ（画面の大きさを変えたとき） ------------ e n d

// ------------ クローズ処理 ------------

$(function(){

$('#v_close_x1').click(function(){                                // Close ボタンクリック時

$('#vbox').fadeOut(v_fade_out_time);                              // 動画非表示(徐々に)

setTimeout("vboxrm2()", v_fade_out_time);                         // 画像動画を消去(時間制御) setTimeout

});});

return false;                                                     // a タグによるアクション（リンク先に飛ぶ)を無効にする

}});};

// ------------ 消去用関数 ------------

function vboxrm2(){// 動画・画像を消去(remove)

$('#vbox').remove();

$('#vbox_body').remove();

}

// ------------ ポップアップ用関数 ------------

function vboxup2(){// 動画を表示

$('#vbox embed').fadeIn(v_fade_in_time).css("display","inline");

$('#vbox #v_close_x1').fadeIn(v_fade_in_time);

}

</script>

<script type="text/javascript">

var v_border_px=40;

var v_fade_in_time="2000";

var v_fade_out_time="1000";

var v_back_parent=0.9;

var video_w=640;

var video_h=390;

var a_play="&autoplay=1";

var p_rel="&rel=0";

$(document).ready(function() {

VideoBox_ver2();

});

</script>



●　記事にはＨＴＭＬモードで下記の様に記述する。


①　文字リンクの場合

<a href="動画のＵＲＬ">文字列</a>


②　画像リンクの場合

<a href="動画のＵＲＬ"><img src="画像のＵＲＬ"></a>