WordPressの記事やページに動画を入れる方法を初心者向けに解説

こんにちは! ライターのナナミです。

最近、動画を使ったサイトが増えてきました。
文字や写真では伝えきれない感動も、動画を使えば余すところなく伝えられて素敵ですね!

自分のサイトにも動画を入れたいけど、どうやればいいのかわからない…

という方もいるかもしれません。

今回はそんな方必見!
WordPressのサイトに動画を埋め込む方法を解説していきます。

この記事は下記の流れで進めていきますね。

【基礎】どんな動画を用意すればいいのか
【基礎】WordPressのデフォルト機能で埋め込む
【基礎】YouTubeやニコニコ動画の機能で埋め込む
【発展】動画を使う時に便利なプラグイン紹介

動画を埋め込むのは、実はとっても簡単なんです。
ぜひ覚えて、どんどんサイトに取り入れちゃいましょう!

どんな動画を用意するべき?

動画を用意する際、いくつか気をつけなければいけないことがあります。
まずはそこを確認していきましょう。

動画のファイル形式はmp4

動画のファイル形式は、ずばりmp4を使いましょう。

画像のファイル形式にjpgやpngなどの種類があるように、動画のファイル形式もいくつかの種類があります。

この種類を間違えちゃうと、サイトがとっても重くなってしまったりブラウザによっては再生できないなどの不具合が起きてしまいます。

mp4はブラウザの互換性が高く、動画としては比較的軽い形式になっています。
用意する際は、mp4の動画であるかを確認するようにしましょう。

使いたい動画がmp4じゃなかった場合は、動画編集ソフトや下記のサイトなどで変換してくださいね。

>>mp4に変換できるサイト

著作権に注意しよう

画像もそうですが、動画にも著作権というものがあります。

著作権とは、写真やイラスト、文章などの権利は製作者にあるというものですね。
動画も著作物となるので、著作権には注意が必要です。

特にYouTubeなどにアップされている動画は、そもそも著作権を無視してアップしているものもたくさんあります。

自分のサイトの信頼性のためにも、その動画は著作権的に問題ないのか、きちんと確認するようにしましょう。

著作権についての詳細については、下記のサイトで詳しく解説しています。
ぜひ併せて読んでみてください。

>>作品を守るために!著作権について学ぼう

デフォルトの機能で埋め込む

動画の準備ができたところで、早速動画を埋め込んでみましょう。

なんと、WordPressにはデフォルトで動画を埋め込む機能があります!
プラグインも必要なし、とってもお手軽ですね。

手順を詳しく見ていきましょう。

動画をアップロードする

まずは動画自体をWordPressにアップロードしましょう。

アップロード方法は画像と同じく、メディアの画面を開いた状態でファイルをドラッグ&ドロップするだけです。

画像よりもちょっと時間はかかりますが、これでばっちりアップロードできます。

そもそも画像のアップロード方法がわからない…
という方は、下記の記事も併せて読んでみてくださいね。

>>これでばっちり!WordPressに画像をアップロードする方法

動画を埋め込む

アップロードした動画を、画面に表示していきます。

画像を挿入する画面を開いて、動画を選択しましょう。

この状態で投稿に挿入ボタンを押せば、埋め込み用のコードが挿入されます。

あとは保存するだけ!
超簡単ですね。

画面では下記のように表示されます。

YouTubeの動画を埋め込む

デフォルトの機能も十分使えますが、関連動画などの機能がついたYouTubeの動画を埋め込みたいという時もありますよね。

なんと、YouTubeの動画もとっても簡単に埋め込むことができるんです!

詳しい方法を見ていきましょう。

なお、YouTubeへの動画の投稿については割愛しています。
まずはそこから知りたい!という方は、下記の記事などで確認してみてください。

>>YouTubeへの動画投稿方法

埋め込みコードを取得する

まずは埋め込みコードを取得しましょう。

埋め込みコードとは、名前の通り埋め込むために必要なコードです。
このコードを取得し、表示したい箇所に貼り付けることで動画を埋め込むことができます。

取得のために、共有ボタンをクリックしましょう。

すると、下記の画像のような画面が表示されます。
この中から埋め込みコードを選びましょう。

プレビューと一緒に、埋め込みコードが表示されます。

赤い枠で囲った部分をコピーすればOKです。

コードを貼り付ける

あとは表示したい箇所に先ほどのコードをペタッと貼り付ければOK!

下記のようにYouTubeの機能を持った状態で埋め込むことができます。

埋め込みコードのカスタマイズ

埋め込みコードを取得する際、コードの下の部分に色々とチェックボックスがあったことにお気づきでしょうか?

この部分で、埋め込む動画の開始位置の変更タイトルの表示非表示などを設定することができます。
こちらもぜひ活用してみてください。

ニコニコ動画の動画を埋め込む

ユーザーによる動画の投稿サイトといえばYouTubeが最大手ですが、日本のサイトも忘れてはいけません。

そう、ニコニコ動画も埋め込みができるのです!

流れはYouTubeと同じく、埋め込みコードを取得して貼り付けるだけです。

埋め込みたい動画のコメント欄の上あたりにある共有アイコンをクリックします。

すると、コメント欄の位置に埋め込みコードが表示されます。

あとは貼り付けるだけ!
簡単ですね。

動画を使う時に便利なプラグイン

WordPressといえばプラグイン!
プラグインによる追加機能は、いつも私たちの作業を楽チンにしてくれますね。

もちろん動画をもっと便利に使えるようになるプラグインも存在しています。

数あるプラグインの中から、おすすめのプラグインを紹介していきましょう!

Featured Video Plus


https://ja.wordpress.org/plugins/featured-video-plus/

投稿画面のサイドバーに、動画用の設定エリアを追加する無料のプラグインです。
記事内の動画の位置も設定することが可能です。

そして何より、動画のサムネイルをアイキャッチとして設定することができます。
動画の紹介ブログなんかでは大活躍してくれそうなプラグインですね!

Viper’s Video Quicktags


https://ja.wordpress.org/plugins/vipers-video-quicktags-migrator/

WordPressのエディタに、動画用のボタンを追加する無料のプラグインです。
いちいち埋め込みコードを取得しなくても、URLだけで動画を埋め込むことができます。

埋め込みコードの取得がめんどくさい…
なんてズボラさんにはもってこいのプラグインです。

まとめ

いかがでしたか?

サイトに動画が使えると、伝えられる情報の幅が一気に広がりますね!

しかもどの方法も簡単に実装できます。
これを使わない手はないでしょう。

ぜひ活用して、素敵なWordPressサイトを作ってください!

最後まで挫折しないマンツーマンレッスン

プログラミング学んで今の生活を変えたい
でも、何から始めればいいか分からない
1番正しい道を知りたい
そんなあなたを「侍エンジニア」は全力でサポートします。

プログラミングを学び人生を変えた卒業生の事例を元に、あなたの理想を叶えるためにはどんなキャリアを歩めばいいか。プロのコンサルタントが無料でカウンセリングさせていただきます。

無理な勧誘は一切ありません。まずは気軽に無料体験レッスンをご予約ください。 無料体験レッスンを予約する

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。