ワードプレスで動画を埋め込んで表示する方法【PC内・Youtube】

そんな疑問を解消するためにこの記事ではワードプレスの動画埋め込み方法について書いていきます。

ワードプレスを使っていて、動画の埋め込み方法や扱いがよくわからない・・・っていう場合は参考にしてみてください。

ちなみにこのサイトもワードプレスで作っていて、動画を埋め込んでいる記事もあったりします。

ワードプレスで動画を使ってみよう。

ワードプレスで動画を埋め込む方法

ワードプレスで記事の中に動画を埋め込む方法としては以下のような方法があります。

自分のパソコンにある動画をアップロードして使う方法とYoutubeなどの動画を埋め込んで使う方法ですね。

これらについての方法を見ていきますよ。

動画をワードプレスにアップロードして表示させる

動画をアップロードする際には記事投稿の画面でアップロードしたい動画をドラッグ&ドロップすればいいです。

ドラッグ&ドロップでアップロード

アップロード自体は楽だね。

もしも自分が持っている動画を記事に載せたかったらこの方法をとってみるといいでしょう。

既にアップロード済みの動画の場合

既にアップロードが済んでいる動画の場合は、動画から記事に追加することができます。

クラシックエディターの場合は[メディアを追加]から行うことができますよ。

サイズ変更はHTML編集から

動画のサイズはHTMLを編集するとできたりします（videoタグにwidthやheight指定しても変わらなかった）

widthを指定

こうすることで一応サイズの変更はできます。

小さくなった動画

そうだね

HTMLを編集してもサイズ自体は変わるんですが、そもそものアップロードする動画のサイズを記事内に収まるように最適化されたサイズにしてアップロードするのが良いですよ。

サイズが大きいとそれだけ動画ファイルのサイズも大きくなってしまいます。

GIF動画なら自動でループ再生される

GIF動画も普通に動画をアップロードする時と同じようにすればできます。GIF動画の特徴としては、mp4などの動画と違って自動でループ再生されるところ。

GIF動画

自分結構動画をGIFに変換して記事に使ったりするんだけど、GIFの方が再生ボタンとか押さないで見れるから楽で好きです。

ちなみに自分はPhotoshopで動画をGIFに変換することが多いです。

Youtube動画をワードプレス記事に埋め込んで使う

Youtube動画を埋め込む場合には以下の方法があります。

Youtube動画のURLを直接記述する

YoutubeのURLを貼り付けるとこんなふうん動画がそのまま埋め込まれます。

URLを貼り付け

ただこれだとサイズも指定できません。HTMLを編集してwidthとheightを調整しようとするとエラーが起きました。

Youtube動画を埋め込んで利用する

Youtube動画をワードプレスの記事内で使うのにおすすめの方法はこっちで、埋め込みコードを利用する方法です。

埋め込みコードはYoutube動画の共有から取得することができる。

このコードを貼り付ければOKです。カスタムHTMLから貼り付けましょう。

これでYoutube動画が表示されるはずです。

また、ショートコードを使っても埋め込むことができます。

これでYoutubeのURLを埋め込めばOKです。

クラシックエディターの場合

クラシックエディターの場合は[挿入→メディア]から埋め込むことができます。

これでYoutube動画が埋め込まれるはずです。

サイズを変更する

サイズ変更する場合はwidthとheightを変更してあげましょう。

また、Youtubeでは16:9が推奨されているので埋め込む動画のサイズも16:9にしておくといいでしょう。

まとめ

今回は以下の場合における動画をワードプレスの記事に埋め込む方法について書いてみました。

• PCにある動画を埋め込む方法
• Youtube動画を埋め込む方法

ワードプレスで動画を埋め込みたい時はあるだろうから、そういう時にさっと入れ込んでやるといいでしょう。