ニコニコ動画プレーヤーをレスポンシブにエンベッド

とか大層なこと言ってるけど、実際はyoutubeをエンベッドしたときと同じcss書いてるだけ。

masterkei.hatenablog.com

[ .scss ]

// niconico responsive embed
#nico_player{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
  margin-bottom: 20px;
}

#nico_player embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[ .html.erb ]

<div id="nico_player">
</div>
<p><script type="text/javascript">
    $(function(){
        document._write = document.write;
        document.write = function(msg) {
            // id名nico_playerに表示させる
            $("#nico_player").html(msg);
            //document.writeを元に戻す
            document.write = document._write;
        }
        var src = "http://ext.nicovideo.jp/thumb_watch/<%= $1 %>";
        var dst = $("<scr"+"ipt>");  //タグと間違われないようにsplit
        dst.attr("type", "text/javascript");
        dst.attr("src", src);
        //追加
        $("body").append(dst);
    });
</script></p>

ﾃﾃｰﾝ

複数のニコ動貼り付けに対応させる

ニコ動を複数貼り付けると対応できないことが判明。指定したidがあるタグに直接書き込んでるんだもんそうなるよね。

なんとかなるんじゃないかと思ってやってみる。

• スクリプト記述先のidは適当に変数使ってインクリメントして作る。超ゴリ押し。
• 引数が複数回呼び出しに対応していないので、同じく上の変数使う。超ゴリ赤木。具体的には以下。
  • document.write上書きするときのファンクションの引数msgのとこ
  • スクリプトを書き込むidの指定のとこ
    • サイズ等指定した「nico_player」はclass属性とし、新しく「nico + 変数」をid属性にする

[ .html.erb ]

...
<% ed_mov = 1 %>
...
...（eachメソッドで以下繰り返し）...
<div class="nico_player" id="nico<%= ed_mov %>">
</div>
<p><script type="text/javascript">
    $(function(){
        document._write = document.write;
        document.write = function(msg_<%= ed_mov %>) {
            // id名niconumに表示させる
            $("#nico<%= ed_mov %>").html(msg_<%= ed_mov %>);
            //document.writeを元に戻す
            document.write = document._write;
        }
        var src = "http://ext.nicovideo.jp/thumb_watch/<%= $1 %>";
        var dst = $("<scr"+"ipt>");  //タグと間違われないようにsplit
        dst.attr("type", "text/javascript");
        dst.attr("src", src);
        //追加
        $("body").append(dst);
    });
</script></p>

複数表示はできたものの。
リロードする度に順番が変わったり変わったりラジバンダリ。

多分document.writeの実行順序がアレでアレな影響なんだろうな。。。

このへん調べて見たらdocument.write死ねってブログたくさんありますね

つづく。masterkei.hatenablog.com

TODO:
フォームの例外処理エラーがおかしい
トップからtitle/showへの遷移、２回目以降がなぜかおかしな位置（ページ中段）に遷移するので修正
detailページのレイアウト直すのとdetail -> title/showの動線を置く
動画URLもっと楽に入れたい