WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPressの本文にプラグインなしで独自の動画を挿入・再生させるようにする方法

公開日: 使い方など

WordPressのコンテンツとして使ってみたいものの中に「画像」や「動画」がありますね。

何かの説明をする際に図や動画で説明を加えると本当に分かりやすくなりますからそうした種類のサイトでは是非使ってみたいところだと思います。

こんなときにはWordpress得意のプラグインで!!と言いたいところですが、動画を挿入するプラグインは複雑なものが多かったり、挿入できる動画に制限があったりしてなかなか「これ!」というものが見つかりにくいのも確かです。それだけプラグイン作者の思いとサイト制作者の思いがさまざまなのだと思います。私も動画に関するいろいろなプラグインをテストしましたがなかなか「これ!」というものがなく、当サイト内たくさんのプラグインを紹介しているものの、動画に関してのプラグインはほとんどありません。

そこで今回は特別なプラグインを使わずに投稿や固定ページの本文内で動画の挿入・再生を行ういろいろな方法、扱える動画の種類、動画を使ったコンテンツでの注意点などを紹介していきます。

どんな動画ファイルが再生できるのか??

アップロードできる(扱える)ファイルの一覧は公式Codex

で紹介されています。この中で動画だけを抽出すると

  1. mp4、.m4v(MPEG-4)
  2. mov(QuickTime)
  3. wmv(Windows Media Video)
  4. avi
  5. mpg
  6. ogv(Ogg)
  7. 3gp(3GPP)
  8. 3G3P2(3GPP2)

これらのファイルについてはメディアライブラリにアップロードして使用できるようです。

ただ、メディアにアップロードできるファイルの大きさがデフォルトでは限られていますので、大きなファイルサイズの動画をアップロードするためには

を参考に容量の拡張を行う必要があります。

※容量の大きいファイルはFTPクライアントソフトを使ったり

を使って「uploads」ディレクトリなどへ直接アップロードして再生させることも可能ですが、管理を考えるとメディアへアップロードできるようにした方が楽だと思います。

本文内に動画を挿入して再生させる方法の例

URLを直接挿入して使用する方法

使用しているテーマによっては動画のURLを挿入するだけで再生できる場合があります。試しにアップロードした動画のURLを張り付けてみてください。

この方法で再生でき、特にオプションが必要なければこの方法が一番簡単です。ただし、幅や高さなどデザイン要素に関する事柄についてはテーマのCSSへ追記する必要があります。

WordPressのショートコードを使用する方法

[video]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


というショートコードを挿入することで動画の再生を行うことができます。

一番単純な使い方は

[video src=”video-source.mp4″]
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


です。video-source.mp4の部分にメディアなどへアップロードした動画URLを挿入するだけです。

このショートコードでは'mp4', 'm4v', 'webm', 'ogv', 'wmv', 'flv'形式のファイルが使用できます。

またこのショートコードには追加パラメーターがあり、

  1. poster/再生前の画像
  2. loop/繰り返し再生するか(offまたはon)
  3. autoplay/自動再生するか(offまたはon)
  4. preload/ページ表示時に動画を読み込んでおくか(”metadata“-動画に設定された文字列 ”none”-なし ”auto”-自動から選択)
  5. height(数字で指定)
  6. width(数字で指定)

を追加することでいろいろな動作の指定が可能です(赤字は何も指定しなかった場合の動作)。

videoタグを使用する方法

通常のhtmlタグを使って挿入する方法です。環境によっては動作しない場合もありますので、そのときは上のショートコードを使用するといいでしょう。

基本となるタグは

<video src=”動画のURL”></video>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

になります。これもいろいろなパラメーターがあり

  1. width/幅
  2. height/高さ
  3. autoplay/自動再生(trueまたはfalse
  4. controlbar/再生バー(yesまたはno)
  5. loop/繰り返し再生するか(trueまたはfalse)

などのオプションが指定できます。ショートコードのパラメーターと似てますね。それらを挿入したコードは

<video src=”動画のURL” width=”600″ height=”380″ autoplay=”true” controlbar=”no” loop=”false”></video>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

こんな感じになります。

ショートコードと異なるのは再生バーを表示するか否かの違いです。再生バーが不要な場合にはhtmlタグを使うことで非表示にできますが、自動再生・繰り返し再生させる場合に再生バーを非表示にしてしまうと訪問者の判断で停止できなくなってしまうので注意が必要かと思います。

動画挿入で気を付けるべきこと

サイトに動きを持たせるために動画を使用しよう!!というのはいいアイディアではありますが、注意することもあります。それは大きな動画もページ表示時に読み込まれるということです。

これは単純にアクセスされたページの転送量が多くなって表示が遅くなるという弊害だけでなく、当然表示するためのサーバーパワーも必要となります。アクセス数が多いとサーバーがハングアップしたり、転送量オーバーを起こしてしまうこともあり、利用しているサーバーによっては転送量の制限がかかったり最悪の場合はアカウント停止となることもあります。

これを回避するためには

  1. Youtubeなど外部の動画配信サイトへ動画を保存し、それらの再生タグを埋め込んで表示する
  2. 動画の容量をできるだけ小さくする

ことが大事になります。

ただ後者では動画の容量を小さくする=画質が粗くなったり動作がスムーズでなくなったりすることに直結しますから、個人的には前者の方法が無難だと思います。

Youtubeではアップロードした動画を簡単に埋め込めるように共有タグが用意されていますからそれを活用するようにしましょう。

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
参考価格:1,738
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】