WordPressに動画を埋め込む方法

WordPressなら、自分で撮影した動画や録音した音声なども、画像をアップロードする感覚で手軽に記事に埋め込むことができます。

さらにYoutubeで公開されている動画は、URLを貼り付けるだけで記事に埋め込めるシンプルさ。
初心者の方でも迷うことは一切ありません。

動画や音声を記事に埋め込む方法

まずは自分で撮影した動画や音声をWordPressをインストールしたサーバーに公開し、記事に埋め込む方法を解説します。

1. 記事の中で動画を埋め込みたい箇所にカーソルを合わせます。
   最初にカーソルを合わせておかないと、おかしな位置に動画が埋め込まれてしまいますので注意してください。
2. 記事投稿画面の「メディアを追加」ボタンをクリックして、メディアを挿入ウィンドウを開きます。
3. 「ファイルをアップロード」をクリックして、「メディアを挿入」ウィンドウにアップロードしたい動画・音声ファイルをドラッグします。
4. 動画・音声ファイルのアップロードが完了したら、「添付ファイルの表示設定」で動画・音声の埋め込み方法を選択します。
   通常は「メディアプレーヤーを埋め込む」で問題はありません。
5. 「投稿に挿入」ボタンをクリックすると、カーソルがある位置に動画・音声ファイルが埋め込まれます。

WordPressの「添付ファイルの表示設定」で、「メディアプレーヤーを埋め込む」を選ぶと、下のようなプレーヤーが表示され、動画の視聴操作をすることができます。

素材提供：NHKクリエイティブ・ライブラリー

YouTubeの動画を記事に埋め込む方法

YouTubeで公開されている動画を記事に埋め込む方法は、2通りあります。

まず最もシンプルな方法は、埋め込みたい動画のURLをそのまま記事に貼り付ける方法です。

1. 記事に埋め込みたい動画をYouTubeで開きます。
2. 動画のURLをそのまま記事に貼り付ければ完了です。

下の動画は、URLをそのまま貼り付けて埋め込んだYouTubeの動画です。

とてもお手軽な方法ですが、この方法は動画のサイズが調整できない点がデメリットです。

記事に埋め込んだ動画のサイズを変更したい場合には、YouTubeの埋め込みコードを使用します。

1. 記事に埋め込みたい動画をYouTubeで開き、共有ボタンをクリックして、「埋め込みコード」のタブをクリックします。
2. 「もっと見る」をクリックしてオプションを開きます。
3. 動画のサイズから決められたサイズを選ぶこともできますが、「カスタム」を選択すると、指定したサイズの動画を埋め込むコードを作ることもできます。
4. その他のオプションも指定したら、埋め込みコードをコピーして、動画を埋め込みたい箇所に貼り付けます。ただし、コードはHTMLとして機能させる必要がありますので、テキストエディタで貼り付けてください。
   ビジュアルエディタで貼り付けると、コードがそのまま表示されていまいます。

下の動画は、横幅を708ピクセルにした動画です。

動画・音声ファイルがアップロードできない場合

動画・音声ファイルをWordPressにアップロードできない場合は、容量制限に引っかかっている可能性があります。

通常、WordPressでアップロードできるファイルサイズは、1ファイルあたり3MB〜5MBです。
それを超える大きさのファイルは、php.iniファイルで設定を変えないとアップロードできません。

php.iniファイルの操作は上級者向けですので、操作は慎重にお願いします。

ここでは、さくらインターネット、Xサーバーの場合のphp.iniファイルの修正方法を解説します。他のレンタルサーバーを使っている場合には、マニュアルなどで確認をしてください。

さくらインターネットの場合

1. Windowsなら秀丸、EmEditorFree、Macであれば、miなどのテキストエディタを使って、空のphp.iniファイルを作成します。何も入力していない空の状態のファイルを「php.ini」という名前で保存します。
2. 作成した空の「php.ini」ファイルを、FTPクライアントを使って「www」フォルダの直下にアップロードします。
3. サーバー管理画面にログインし、「PHP設定の編集」をクリックします。
4. テキストエリアに、ファイルアップロードサイズに関する設定を書き込みます。設定する項目の意味はファイルアップロードサイズに関するphp.iniの設定をご覧ください。

Xサーバーの場合

Xサーバーの場合は、サーバーパネルにログインして、「php.ini設定」から設定を行います。

1. 「ホームページ」の中にある「php.ini設定」をクリックします。
2. php.ini設定がONになっていなければONにします。ただし、サーバーパネル以外で設定したphp.iniの設定は無効になりますので、すでにphp.iniを設定している場合は注意が必要です。
3. 「php.ini設定変更」で、ファイルのアップロードサイズを管理画面から修正することができます。
4. 「memory_limit」「post_max_size」「upload_max_filesize」「max_input_time」の値を修正して「設定する」ボタンをクリックします。設定する項目の意味はファイルアップロードサイズに関するphp.iniの設定をご覧ください。

ファイルアップロードサイズに関するphp.iniの設定

ファイルアップロードサイズに関するphp.iniの設定は、以下の4つです。

memory_limit = 50M
post_max_size = 40M
upload_max_filesize = 30M
max_input_time = 60

memory_limitは、PHPスクリプトが確保できるメモリサイズの最大、upload_max_filesizeはアップロードできるファイルサイズの最大を設定しています。

ここでは、アップロードできるサイズを、1ファイルあたり30MBに増やしています。

ファイルサイズは自由に設定することができますが、memory_limitのサイズが一番大きく、upload_max_filesizeのサイズを一番小さくする必要があります。

---

WordPressの記事に動画を埋め込む方法は簡単ですが、ファイルのアップロード制限を修正するのは、少し難しいと思います。

もし、php.iniの修正が難しかったら無理に設定をしないで、YouTubeに動画をアップロードして、その動画を埋め込む方が安全です。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク（6か月のガッチリ型）

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします