Written by Kosei Yayoshi

【WordPress】ニコニコ動画を綺麗に埋め込む方法【コピペでOK】

WordPress

WordPressサイトに、ニコニコ動画を埋め込み、綺麗に表示させるテクニックです。

最近は、YouTubeを埋め込むことが主流になっていますが、ニコニコ動画もWordPressサイトに埋め込むことができます。ニコニコ動画をWordPressサイトに綺麗に埋め込むには、少しコツがいるので紹介します。

完成イメージ

上記の動画は、ニコニコ動画にアップされている「メルト」という曲です。divタグでニコニコ動画の埋め込みコードを囲っただけなのですが、綺麗に埋め込まれてないですかね?

どうしたら綺麗に埋め込むことが出来るのか?
その秘密は、divタグとCSSにあります。CSSを使うと、サイトの見た目を簡単にカスタマイズすることができます。

CSSは、WordPressサイトを運営しているなら、少し触ったことがあるかもです。しかし、別に、CSSを詳しく知らなくても、実装可能なのでご安心を。

【WordPress】ニコニコ動画を綺麗に埋め込む方法

まずは、埋め込みたい動画の埋め込みコードを取得します。下記の画像を参考に埋め込みコードをコピーです。

ニコニコ動画の埋め込みコードは、下記のとおり。

<script type="application/javascript" src="https://embed.nicovideo.jp/watch/sm1715919/script?w=720&h=480"></script><noscript><a href="https://www.nicovideo.jp/watch/sm1715919">初音ミク が オリジナル曲を歌ってくれたよ「メルト」</a></noscript>

ニコニコ動画の埋め込みを綺麗にするCSS

下記をCSSに追記します。CSSの追記方法は、WordPressテーマによって異なるので、ググってください。

.youtubeWrapper{
	position: relative ;
	margin-top: 1.2em ;
	margin-bottom: 60px ;
	padding-top: 69px ;
	padding-bottom: 50% ;
	overflow: hidden ;
}

.youtubeWrapper iframe {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ;
}

ニコニコ動画の埋め込みコードをコーディング

ニコニコ動画の埋め込みコードを、下記のようにコーディングします。

<div class="youtubeWrapper"><script type="application/javascript" src="https://embed.nicovideo.jp/watch/sm1715919/script?w=720&h=480"></script><noscript><a href="https://www.nicovideo.jp/watch/sm1715919">初音ミク が オリジナル曲を歌ってくれたよ「メルト」</a></noscript>

分かりやすく書くと下記のとおり。ニコニコ動画の埋め込みコードをdivタグで囲むだけですね。

<div class="youtubeWrapper">ニコニコ動画の埋め込みコード</div>

【完成】ニコニコ動画を綺麗に埋め込めるとこんな感じ

以上で終わりです。

本記事は、下記の記事を参考にしました。なんか、パクリみたいな感じになってしましました。m(_ _)m

このブログでも、下記の記事のYouTube高速化テクニックを使っています。

読んでみると、分かりますが、下記記事のYouTube用のカスタマイズを、ニコニコ動画に応用しただけです。