こんにちは♡立花和紗です。
先日、自分の芸能用のオフィシャルブログに
ニコニコ動画の外部プレイヤーを設置していたときのことです。
タグを設置し終えて、いざCSSでレスポンシブ対応にしようとしたら
外部プレイヤーってiframeじゃないから
YouTubeみたいにサイズ調節できない！
ということに気づきました( ﾟдﾟ)ﾊｯ!
javaScriptで動くんですよね！ニコニコ動画の外部プレイヤーって！
なので、今回はニコニコ動画の外部プレイヤーのサイズをレスポンシブに対応させる方法について説明します。
HTMLでサイズを指定する
ニコニコ動画の外部プレイヤーのURLはこんな感じになっています！
<script type=”text/javascript” src=”http://ext.nicovideo.jp/thumb_watch/sm29577368?w=490&h=307″></script><noscript><a href=”http://www.nicovideo.jp/watch/sm29577368″>【ニコニコ動画】【新人声優が歌ってみた】吉原ラメント【和紗*kazusa*】</a></noscript></code>
w=490&h=307
この部分に注目！実はこの部分、外部プレイヤーのサイズを指定できる場所になっています。
デフォルトだと、横が490px、縦が307pxで設定されています。
この数字を変えることで、サイズを変更できます(*´∀｀*)
CSSでサイズを指定する
CSSだとこちらのタグで指定することが出来ます。
embed[src*=”nicovideo.jp”]{
width: 100%;
height: 350px;
}
width: 100%;
height: 350px;
}
横幅を100％、縦を350pxで設定しています。
こちらは、パソコンで表示された場合のサイズを設定しています。
上記2つを組み合わせて、レスポンシブ対応にする
上記2つが出来れば後は簡単です！
HTMLでスマホのサイズを指定して、CSSでPCのサイズを指定します。
ちなみに私は、HTMLでは横幅を315px、縦を220pxに設定して
CSSででは上記の横幅100％、縦350pxで設定しています。
実際に設定してみたページがこちらです。
歌ってみた動画丨一乃瀬かずさOfficialブログ
是非試してみてくださいね！
LEAVE A REPLY