投稿日:

    カテゴリー 技術 / デザイン / 制作

    youtubeのiframeをremove();しようとするとIEでバグる件

    今日はw杯アジア最終予選オーストラリア戦ですね。
    19:30キックオフだし定時でサクッとあがって家で観戦したいもんですね。
    しかし不発弾処理もあって電車止まったりしていたしスタジアムまで行く人は大変そう。。。
    WP事業部すぎやまです。こんばんは。

    さて、WEBページ上にyoutube動画を埋め込むのに便利なiframeですが、変なブラウザバグ?に出くわしました。
    lightbox風にページ全体を覆った上で動画を再生するという単純なもの
    (ライブラリやプラグインではなくスクラッチで組んだものですが)
    ですが、汎用性を持たせるためにサムネイルをクリック後にappend();したり閉じるときにremove();したりしていました。

    今まで使ってきて表題のようなバグが出ることはなかったはずなんですが、最近バグが出ているのに気づきました。

    IEで再生中に閉じてもiframeをremove();しているはずなのに動画が消えない!!

    閉じるボタンだったり動画部分の要素は正常に消えてくれてますが、なぜか動画だけ残ってしまいます。IEだけ
    正確にはソース的には消えてるけど、表示が残ってしまっている感じでしょうか。IEだけ
    youtube上で一時停止とか何かしら操作しようとしてクリックするとブラウザ画面上がブラックアウトします(笑)IEだけ
    怖いですねー。。。

    remove();時にdisplay:none;もかけてやると動画は消えますが音だけ流れ続けます(笑)
    意味がわからないですねー。。。(笑)
    もう今までのソースは破棄してYouTube JavaScript Player APIの.stopVideo();使おうかと思って書いてみましたが、、、、
    確かに止まりましたがIE7以下には対応していないみたいです(涙目)

    もう諦めてプラグイン使おうかなーとか思いましたがこんな記事を見つけました。

    ie8でyoutube埋め込みプレーヤーのバグ

    IE8のみみたいけど状況は似てるしなーってダメもとで試してみたら

    直った\(^o^)/

    .attr("src","");追加しただけで直った!!

    たった15文字追加しただけで解消しました。ウンウン悩んでた時間を返せ(笑)

    直る前直った後でデモページ作ってみました。IEで見てやってください。
    動画ソースは僭越ながら自分の卒制動画で(笑)