Roundaboutでyoutube対応のコンテンツスライダーを実装

Roundaboutというライブラリを使ってくるくるまわるスライダーの実装を指示されたのですが、いつもと変わらず苦労したので備忘録として残しておこうと思います。

このライブラリは真ん中にメインのコンテンツが表示されていて、左右のコンテンツをクリックするとクリックしたほうの要素が真ん中にくる動きをします。(本家サンプル参照
今回youtube動画を埋め込まなければいけなかったのですが早くも問題が発生しました。

左右にyoutubeコンテンツがあった場合、それをクリックすると、要素は真ん中に移動せずに動画の再生を始めてしまいます...。
RoundaboutのAPIを眺めてみましたが英文ばかりで嫌になったので、他に手はないかと考えた結果、動画の上に透明な要素をかぶせてしまうことにしました。
jqueryでiframeの前に空のdiv「click-filter」を配置し、cssでiframeの上に重なるようにしています。真ん中の要素にはライブラリが「roundabout-in-focus」というクラスをふるので 「roundabout-in-focus」の時はdisplay: none;で非表示にしています。こうすることで、クラス「roundabout-in-focus」があたっているときは動画再生できますが、それ以外の時は動画の上に透明の要素(click-filter)がかぶさっているのでクリックしても動画は再生されません。

【jQuery】

【css】

これで完成だ!といきたいところでしたがそうはいきませんでした。やつです。またしてもやつが立ちはだかりました。IE8です...。
IE8で確認したところ、youtube動画に対してz-indexが効いていないため後ろに回る表現にならない。先に実装した「click-filter」が効いていないため真ん中以外でクリックするとyoutube動画が再生してしまうという問題が発生しました...。

またしても泥沼か...とかなりげんなりしてしまいましたがgoogleで検索してみると下記のサイトに解決方法があり、動画のURL末尾に「&wmode=transparent」を追加することで無事解決しました。

iframe版の場合URL末尾に「&wmode=transparent」を追加

Youtubeのz-index有効にする方法-WEB関係メモ帳

「click-filter」が効かない問題は、IE8はどうやらbackgroundに何かしら値が入っていないと要素のサイズを確保できないようだったので、動画と同じサイズの透明画像をclick-filterのbackgroundに指定してやることで解決しました。

この方法がよいかどうかはアレですがなんとか要件を満たすことができました...。もう本当にIEは消えてなくなってほしいし、バグ満載なブラウザを作るはやめてほしいです...。

以下、今回書いたコードとサンプル

【jQuery】

【css】

【html】

以上

投稿日
カテゴリ