FireFoxでswfobject.jsが 再生されないエラー

FireFoxでswfobject.jsが再生されないエラーの解決法 | トラブルシューティング

【トラブルシューティング】FireFoxでswfobject.jsが再生されないエラーとその解決法(4つの試行錯誤)

 swfを埋め込むための有名なプラグイン、「swfobject.js(2.2)」を使って、 当サイトのンディングページでもFlashを再生しています。 これまでも何度か、いじくってサイトを更新しているうちに、エラーを見つけちゃいました。

【トラブルシューティング】FireFoxでswfobject.jsが再生されないエラーとその解決法(4つの試行錯誤)

ブラウザは、FireFox。

FireFoxで閲覧すると、 swfが全く再生されず、真っ白だったんです...。
普段 Google Chrome ばっか使ってるせいで、表示エラー見落としていました...。
TOPページが真っ白って、かなり深刻だよね。
「コレが本当のミニマルデザインです!」って言い張るしか無い...笑

【問題点】

問題のswf埋め込みソースコードは、下記のとおり。

[html] <script type="text/javascript">// <![CDATA[ var ver = '8.0.0'; var eiswf = ''; var vars = {}; var params = { scale:'noBorder', salign:'lt', menu:'false', quality:'high', bgcolor:'#FFFFFF' }; var attributes = {id:'flashContent',name:'flashContent'}; swfobject.embedSWF("/index.swf","flashContent","100%","100%",ver,eiswf,vars,params,attributes); // ]]></script> [/html]

 

このソース...なにがいけなかったか... ググったり、試行錯誤したりして下記の4つのことを試してみた。

①var param = {allowfullscreen :'true'}; の記述が足りない。

・・・ま、関係なかった。笑

②wmode:'XXX' の記述が足りない。

・・・swf以外のDOMと共存させたいのなら、たとえば、wmode:'transparent'と記述する。 chromeでswfが全面表示になってしまっているときは、wmode:'window'とchromeが自動処理してしまっている可能性が高い。
(余談) 家のMacのGoogle Chromeでは、正常にswfが再生されて、ヘッダーとフッターの背面にきちんと重なっているが、 会社のWindows (XP)のGoogle Chromeで見ると、swfが全面を覆ってしまっているんだ。 こんなことってあるのか!?考えても解決しないのでいったん、迷宮入り! 

③window.onload = function(){}

[参考URL] http://webdrawer.net/browser/firefoxflash.html
上記の記事を参考にすると、

[html highlight="3,16"] <!-- swfobject --> <script type="text/javascript">// <![CDATA[ window.onload = function(){ var ver = '8.0.0'; var eiswf = ''; var vars = {}; var params = { allowfullscreen:'true', scale:'noBorder', salign:'lt', menu:'false', quality:'high', bgcolor:'#FFFFFF', wmode:'transparent' }; var attributes = {id:'flashContent',name:'flashContent'}; swfobject.embedSWF("/index.swf","flashContent","100%","100%",ver,eiswf,vars,params,attributes); } // ]]></script> [/html]



のように、

window.onload = function(){}

の中に入れてしまえば、再生されるらしい。 これで、みんな解決したとの記事も他にチラホラ! これは、期待大!!自分もこれで解決か!? 
ワクワクして、アップロードして「更新」ボタンを押し見る!

...真っ白。

「エ〜〜〜〜!!なんで??
もうわからん...

④そもそもCSSが、変!?

・・・僕の場合、エラーに気付いたときのCSSは、下記のとおり。

[CSS: Before] [css] /* ======================================================================== #flashContent ======================================================================== */ #flashContent { width:100%; height:100%;} #flashContent { z-index:11; position:relative; /*position:fixed !important;*/ } [/css]





幅と高さは、100%。...問題無し。 重ね順は、ヘッダーとフッターよりもちゃんと後ろになってるんです。positionは、relative ... 
「うーん、relative がおかしいのかなぁ...。」と、思って、positionをfixed に書き換えてみる!

[CSS: After]  [css] /* ======================================================================== #flashContent ======================================================================== */ #flashContent { width:100%; height:100%;} #flashContent { z-index:11; /*position:relative;*/ position:fixed !important;} [/css]





すると!!!!なおったーーーーーーーーーーー!!!!
まさに fixed 〜〜〜〜〜〜!!!!!!!!!!!!!!!!!!!!!!! 
ありがとう!position:fixed 〜〜〜〜〜〜!!!!!!!!!!!!!!!!!!!!!!!

つまり、今回は、 swfobject.js が悪いんじゃなくて、それを入れるDOM(今回でいう#flashContent)が悪かったのでした...。俺が馬鹿だった。

FireFoxでのswfobject.jsの拒否エラーは、
window.onload = function(){ }で囲む事で、ほとんど解決できるようです。

解決できない場合は、今回のぼくのように、そもそもCSSが変な可能性ありです。
すこしでも参考になれば(^0^)/

じゃんじゃん!!