【ブロックエディタなのにHTMLで埋め込む訳】WordPressにYouTube動画を綺麗に埋め込む方法

WordPressにはブロックエディタとクラシックエディタというものがあります。
ざっくり説明するとブログの編集画面が2種類ありますよってことです。


で、僕はブロックエディタを使っているため、
基本的にブログ記事リンクや外部リンクを記事に埋め込む際は
HTMLコードを使わずURLのみをコピペしています。


ですが、中にはあえてHTMLコードを使う事があります。
今回はその中でもYouTube動画の埋め込み方を解説していきます。

ブロックエディタなのにHTMLコード？

ブロックエディタの機能の一つで「HTMLコード」を使えるものがあります。
「フォーマット」内の「カスタム HTML」を選択すればOK。

で、なぜ簡単に埋め込みができるブロックエディタなのに、
わざわざHTMLコードを使うかと言うと、

• 動画の表示サイズを変えられる
• 動画の再生開始を好きなところからにできる

主にこの二つの理由から僕は動画埋め込みはHTMLでしています。
以下にサンプルの動画を埋め込んでみます。

普段よりも若干サイズを大きくし、再生開始時間を1:25からにしてみました。
ブロックの埋め込み機能を使うと、
サイズも再生時間も固定されるため自由に設定で出来ません。

動画のサイズはブログ記事の見栄えに影響しますし、
特に注目してほしいポイントがある場合は再生開始時間を設定できるのはとても便利です。

YouTube動画の埋め込み方

では早速、埋め込み方法を解説していきます。
まずは埋め込みたい動画を開いてください。

動画外右下にある「共有」をクリックしてください。

すると、上の画像が表示されるため「埋め込む」を選択。

すると動画の埋め込み用のHTMLコードが表示されます。

• width＝横幅 height＝縦幅
  任意の数字に変えることでサイズ変更可能
• 開始位置
  チェックを入れ、任意の再生時間を入力
• コピー
  上記の設定が完了したら最後にコピーをクリック

以上の操作が完了したら、
動画を埋め込みたい記事の編集ページに移動してください。

「ブロックの追加」→「フォーマット」→「カスタム HTML」の順にクリック。
先ほどコピーしたHTMLコードを貼り付ける。

これで動画の埋め込みが完了しました。

ちなみに上がHTMLコードで動画を埋め込んだ時のもので
下がURLのみで埋め込んだものです。（テーマによってサイズは結構変わる）

こうして並べてみると同じ内容の動画でも受ける印象が違うと思います。
サイズや再生位置を上手く使い、より効果的に動画を使っていけると良いですね(^^)