2011年5月19日 星期四

thickbox與iframe的zindex設定法

公司網頁嵌入了一個播放youtube的iframe
然後又用了thickbox處理使用者登入視窗
原本在thickbox啟動時,背景元素應該都會被覆蓋無法點擊
但是播放youtube的iframe沒有遵守這個作法,使用者還是可以直接點擊控制
我是用調整z-index的作法來處理,不確定有沒有其他作法
以下是我的作法:
1. 調整thickbox的css:
在css中加入以下樣式
<style type="text/css">
#TB_window, #TB_overlay {z-index:999 !important;}
</style>
2. 修改youtube連結
a. 修改iframe
加入"wmode="Opaque"
成為<iframe id='video_frame' style="z-index:1" title="YouTube video player" width="230" height="230" frameborder="0" allowfullscreen="" wmode="Opaque" ></iframe>
b. 修改url連結:
原本連結後面加上"?wmode=transparent"
成為"http://www.youtube.com/embed/BycyfplIcEM?wmode=transparent"
修改這兩個點之後,使用thickbox時就可以將內嵌的youtube影片連結放到背景並避免使用者點擊了

隨場加映:使用flash時的作法
基本上和前一個作法一樣,不過修改方式不同:修改flash object中的param和embed標籤屬性
<param name="WMode" value="transparent"></param>
<embed wmode="transparent" type="application/x-shockwave-flash" width="550" height="344" src="http://www.youtube.com/videourl" allowscriptaccess="always" allowfullscreen="true"></embed>

2 則留言:

zoe 提到...

謝謝你的po 文~~幫了我大忙 :D

匿名 提到...

讚link