YouTubeやニコニコ動画をワードプレスに綺麗に埋め込もう

ニコニコには無反応のワードプレスに動画を埋め込みましょう。

レスポンシブルデザインにも対応します。

まずは初期状態を確認しよう
CSSに記述を付け加える
動画を埋め込む
終わりに

まずは初期状態を確認しよう

ニコニコ動画

PCだとそこまで違和感がないかもしれませんが、スマホだと変な形になったりします。

今回はこれを直して見やすくしたいと思います。

CSSに記述を付け加える

CSS（カスタムシート）に以下のコードをコピペして下さい。

外観からカスタマイズを選択し、追加CSSを選択します。

すると下の画像のような画面になるので、下記コードをコピペして、必ず公開を押してください。

張り付けるコード

/*埋め込み動画レスポンシブル*/
.umekomi {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.umekomi iframe {
  width: 100%;
  height: 100%;
}

こちらのサイト様より引用
https://hirashimatakumi.com/blog/6601.html

これでCSSの準備は整ったので、実際に張り付けてみましょう。

動画を埋め込む

コードを習得

PC版動画プレイヤーの右上に共有ボタンがあるのでクリックし、プレーヤー埋め込みコードをコピーします

ワードプレス側の準備

先ほど追加したCSSは埋め込んだプレイヤーの表示をコントロールするもので、対象を指定しなければいけません。

ただコピペしただけでは動作しないのでカスタムHTMLで動画を埋め込みましょう。

画像のように「ブロックを追加」を選択し、ウィジェットにカスタムHTMLがあるのでクリックをします。

このようになればOKです

カスタムHTMLに張り付け、対象を指定する

先ほどコピーしたコードを作成したカスタムHTMLに張り付けます。

次に、CSSで指定した.umekomiに対応させるため、<div class=”umekomi”>で囲みます。

<div class=”umekomi”>コピーしたコード</div>という感じにします。

下記コードは使用例です。

<div class="umekomi">
<script type="application/javascript" src="https://embed.nicovideo.jp/watch/sm37576518/script?w=640&h=360"></script><noscript><a href="https://www.nicovideo.jp/watch/sm37576518">レーザービーム/Perfume feat AIきりたん&イタコ</a></noscript>
</div>

使用前と使用後の違いを見てみましょう