Youtube埋め込みのモーダルがIE8でバグった話

珍しくちゃんとマークアップエンジニアなネタ。

iframe

ボタンを押したらモーダルが出てきてYoutubeが再生されて、バツを押すとモーダルが消えるという、よくある実装をしてた。
順調に作れてたんだけど、IE8でバグった。

バグった

モーダルを消そうとバツを押すと、モーダルは消えるが画面が真っ黒になる。

なんだか怪しそうだったので、Youtubeのiframeをコメントアウトしたら正常に動いた。
どうやらiframe周りのバグらしい。

ググった

ここまでくればあとはググれば先人の知恵が...「iframe jquery remove ie」(検索ゥー!

出てきた。

[IE8]動的ifraim問題[youtube]

解決した

結局のところiframesrcを空にしてあげてからモーダルのDOMをremoveしたら正常に動きました。

// <iframe>のid属性が'youtube'の場合
$('#youtube').attr('src', '');
$('#youtube').remove();

結論

IE8のサポート切れまであと半年ちょいです。
頑張ってまいりましょう。