和洋風KAI

【完全版】ニコニコ動画の外部プレイヤーのサイズを変更する方法。

【ニコニコ動画】【アメリカすげぇ】FREELY TOMORROW – AX2012 –

ニコニコ動画の外部プレイヤーの横幅縦幅が指定できないとお嘆きのあなたにサイズを変更する方法をお届けします!

ニコニコ動画の外部プレイヤーのサイズを変更する方法。HTML編

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1333695559?w=490&h=307"></script><noscript><a href="http://www.nicovideo.jp/watch/1333695559">【ニコニコ動画】ネット初!完全生中継【将棋】第70期名人戦七番勝負PV</a></noscript>

ニコニコ動画から外部プレイヤーのHTMLを引っ張ってくると上のようなHTMLになります。

その中のsrcの中のURLに注目してください。

http://ext.nicovideo.jp/thumb_watch/1333695559?w=490&h=307

こうなっていますね。このURLの末尾に注目してください。

w=490&h=307

実はこの部分がニコニコ動画の外部プレイヤーのサイズを指定できる場所になっています。wが横幅、hが縦幅を意味します。

例えば500×260にしたい場合はこうなります。

w=500&h=260

HTMLだとこうですね。↓↓

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1333695559?w=500&h=260"></script><noscript><a href="http://www.nicovideo.jp/watch/1333695559">【ニコニコ動画】ネット初!完全生中継【将棋】第70期名人戦七番勝負PV</a></noscript>

【via: flip365.net

ニコニコ動画の外部プレイヤーのサイズを変更する方法。CSS編

ちなみに、CSSでも「すげー便利!ドメイン別にスタイルシート(CSS)を当てる方法。」のような書き方を行うとサイズ変更が可能です。↓↓

embed[src*="nicovideo.jp"]{
width: 500px;
height: 260px;
}

embedの中のCSSを直接指定する方法もあります。↓↓

#external_nico_0{
width: 500px;
height: 260px;
}

ただこれだと、指定されているclassの種類が外部プレイヤーによってバラバラで、external_nico_0からexternal_nico_4まであるみたいなので、URLで指定する上の方がスマートだと思います。

ニコニコ動画の外部プレイヤーのサイズはなんで変更できないんだ!とお嘆きの方はぜひ参考にしてください。

追記: スマホとPCのサイズに対応させる場合。

今思いついたのですが、HTMLでスマホのサイズを指定して、CSSでPC版のサイズを指定やればどっちも上手く表示できますなー。

つまり、HTMLでは横幅300px、縦幅250pxとスマホサイズに指定します。

<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/1333695559?w=300&h=250"></script><noscript><a href="http://www.nicovideo.jp/watch/1333695559">【ニコニコ動画】ネット初!完全生中継【将棋】第70期名人戦七番勝負PV</a></noscript>

PC版のCSSは横幅500、縦幅325とします。

embed[src*="nicovideo.jp"]{
width: 500px;
height: 325px;
}

こうすれば、どっちも適切なサイズに収まることができるわけですね。あーちょっと考えればわかることやった!(ちなみに逆だとMobile SafariのCSSの解釈問題で上手くいきません。)

どっちで見ても適切なサイズになってると思います。↓↓

【ニコニコ動画】ネット初!完全生中継【将棋】第70期名人戦七番勝負PV

するぷはこう思った。


というわけで完璧にニコニコ動画の外部プレイヤーのサイズを変更することに成功しました。

リサイズできない外部プレイヤーもあるというのは、僕のCSSが誤ってたからでした。すんません

Viva!ニコニコ!