こんばんは。ボカロPのスイフーだよ。
普段はYouTubeやニコニコ動画にボカロオリジナル楽曲のミュージックビデオを投稿しているよ。
このブログでMVを紹介する際、プレイヤーを埋め込むことがよくあるが、YouTubeの動画は多くのWordPressテーマが「レスポンシブ」対応していて、デバイスの画面に合わせてサイズが自動的に調整されるため、非常に便利。
ちなみに「レスポンシブ」とは、スマートフォンやタブレット、PCなど、閲覧している端末の画面サイズに応じてデザインやレイアウトが最適化される仕組みのこと。これにより、どんな端末でも快適に動画を視聴することができる。
しかし、ニコニコ動画の埋め込みは、標準の状態ではこのレスポンシブに対応していない。ブログやウェブサイトにニコニコ動画を載せたとき、サイズが固定されてしまい、デザインが崩れることに悩んだ人もいるかもしれない。
そこで今回は、少しの工夫で簡単にニコニコ動画の埋め込みをレスポンシブ対応にする方法を紹介する。
難しいコードを書く必要はないから、ぜひ試してみてね。
ニコニコ動画の埋め込みをレスポンシブ対応にするコード！
ニコニコ動画の利用規約で、提供されているコードやスクリプトの改変が禁止されている可能性があるため、埋め込みコードを直接変更することは推奨しない。
そのため、埋め込みコードをそのまま使用し、それを囲む親要素に対して、外部CSSでスタイルを適用することでレスポンシブ対応が可能になる。
まずは、WordPressの「カスタムHTML」ブロックや、右クリックで利用できる「HTMLとして編集」機能を使って、動画を埋め込みたい場所に下記のコードを貼り付ける。コピペ！
<div class="nico-responsive">
<!-- ここにニコニコ動画の埋め込みコードを貼り付け -->
</div>次に、WordPressの「カスタマイズ」→「追加CSS」へ下記のコードを貼り付ける。コピペ！
/* ニコニコ動画 埋め込みレスポンシブ */
.nico-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.nico-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}CSSのクラス名はnico-responsiveにしているが、これは自由に決めてOK。
(padding-bottom: 56.25%は16:9のアスペクト比に対応。動画が別のアスペクト比の場合は、この値を調整する。例えば、4:3のアスペクト比の場合はpadding-bottom: 75%に変更する。)
これで完了！
ニコニコ動画の埋め込みコードは取得不可に？過去のコードで解決する方法
以前は、共有ボタンからプレイヤー埋め込みコードを取得して、ブログやサイトに直接貼り付けることが可能だった。しかし、現在はURLのコピー(リンクをコピー)しかできなくなっている。
それでも、過去に埋め込んだ動画のリンクは切れておらず、さらに、過去の埋め込みコードを参考にして動画IDを差し替えれば、新しい動画も問題なく埋め込むことができる(自己責任で)。
<div class="nico-responsive">
<script
type="application/javascript"
src="https://embed.nicovideo.jp/watch/動画ID/script?w=640&h=360">
</script>
<noscript>
<a href="https://www.nicovideo.jp/watch/動画ID">動画タイトル</a>
</noscript>
</div>↑「動画ID」の部分は、動画URLに含まれるsmから始まる数字を入れる。
「動画タイトル」の部分は、変更してもプレイヤーには反映されないが、念のため、元の動画タイトルをそのまま記載しておくのが無難だろう。
編集後記：仕様変更に注意！定期的な確認を
現時点では問題なく使えるので、埋め込み機能を活用して動画を効果的に紹介していこう。
ただ、今後の仕様変更に備えて公式情報を定期的に確認する必要はあるね。
あと、まったく関係ないけど、WordPressで記事を書いているときに、キーボードの左矢印キーを押すと、カーソルが強制的に行の一番右側に移動してしまう現象が発生。この問題がmacOS特有なのか、あるいは自分の環境だけの問題なのか不明だった。
ブラウザをFirefoxからSafariに切り替えたところ、この問題はすぐに解消。ブラウザが原因だったか。
今は、Firefoxでも同じ現象が起こらなくなった。
原因は完全には分からないけど、とりあえず解決してよかった。