えーと、youtubeをiframeに入れた場合のフェードインフェードアウトを使ったページ切り替え。
話せば長くなる…。
$(window).load(function() {
var vid_id = $('.player').get(0).src.match(/embed\/([^?]+)/)[1];
var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
$('
').attr("src", vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('.fade-image');
});
これでまずyoutubeのサムネイル画像を取得する。
(サムネイルっつーかyoutubeのTOP画(?)と同じ大きさの画像。)
iframeにclass="player"を指定すると勝手に取ってきてくれる。
それをdiv.fade-imageにぶちこんでる。
省略して書くと
<div class="holder">
<iframe class="player"></iframe>
</div>
<div class="fade-image"><img /></div>
<img />は↑のjQueryで挿入されます。appendToで。
<iframe>を<div><img /></div>で覆う。(position:absolute;で同じ位置に重ねてる)
で、div内の画像をフェードインさせることによって
あたかもiframeがフェードインさせてるようにみせるってのがカラクリ。
firefoxの場合、
$('.fade-image').hide();
これだけでいい。
要するに画像が挿入されても#mainbox1のフェード途中なので
画像も一緒にフェードインして表示されます。
そのフェードインが終わったあと、コールバック関数として、
$('.fade-image').hide(); を書けば終了。
めっちゃ単純。
IEの場合、、、、、
$('.holder').hide();
$('.fade-image').hide().fadeIn(2000, function(){
$('.fade-image').hide(1, function(){
$('.holder').show();
});
});
ややこしい。
IEの場合なぜかyoutubeがめっちゃでしゃばってくる。
画像で上から覆うくらいじゃ隠れない。
ので、$('.holder').hide();で、まず消す。
そして、フェードインで表示させたいので
画像もすぐ消し、メソッドチェーンでフェードイン。
フェードインが完了したら、画像を即消し、youtubeを表示。
めっちゃ手間。
firefoxの場合、親要素のdivのフェードイン表示に
画像がつられてフェードイン表示になってくれるんだけど
(だから、画像hideしたりshowしたりするだけでフェードイン・アウトができる。楽。)
IEにはそれがない。いちいち指定しなくちゃならない。
めっちゃ手間。
グーグルクロームとかサファリで違う挙動したらマジで面倒やな、、、
あとで確認せな、、
ちなみに、IEとそれ以外のブラウザでの処理を分けるのにif文を使ってます。
if(document.all && !window.opera) {
IEの処理
} else {
それ以外の処理
}
です。
あとはiframeでposition:absolute;使ってもたから、
#mainbox1の高さの問題か、、、
最近のコメント