WordPressで動画を埋め込みカスタムする方法|mp4・YouTubeやカスタマイズまで

  • このエントリーをはてなブックマークに追加
ワードプレス,動画,埋め込み

自分で撮影した動画や音声、で公開されている動画などをWordpressでは簡単に埋め込み表示をすることができます。

YoutubeはURLをエディターにコピペで埋め込むことができるという手軽さ。

動画や音声も非常に簡単に埋め込みができます。

更にちょっと設定をしたりプラグインを導入すれば更なるカスタマイズも可能です。

ここではWordpressに動画・音声を埋め込むありとあらゆる方法とカスタマイズをする方法を網羅的に解説していきます。

1.Youtube動画を埋め込む2つの方法

それではまずはYoutubeの動画を埋め込む方法ですが主に2つの方法があります。

1つはめちゃくちゃ簡単だけど細かい調整をすることができない方法でもう1つがちょっと面倒だけど細かい調整をすることができる方法です。

どちらのやり方も覚えておくと便利ですのでここでは両方解説していきます。

1-1.動画のURLで埋め込む

まずは簡単にユーチューブの動画を埋め込む方法について解説していきます。これは非常に簡単で「え?こんなんで動画が埋め込めるの?!」と思うやり方です。

やり方は非常に簡単です!

表示させたい動画のyoutubeページに移動をしてURLをコピーして投稿画面に張り付けるだけです。

早速、あなたが挿入したいyoutubeページを開いてみましょう。

開いたらURLをコピーしてください。

URL,埋め込む,動画

ACTION

① 表示したい動画のyoutubeページを開く
② URLをコピーする

あとは、このURLをワードプレスの投稿画面に張り付けるだけです。

ワードプレス,投稿,貼り付ける

貼り付けると以下のようにビジュアルエディターにユーチューブの動画が表示されます。

ワードプレス,エディター,動画

たったこれだけで投稿画面にYoutube動画が埋め込まれました。

非常に簡単なので動画を入れるときにはこの方法を使いたくなってしまいますが、簡単なのは確かですがこの挿入方法には弱点があります。

下記を見てみてください。

youtubue動画

一目見ればわかるように、横幅が狭いのです。500ピクセル以内ならば綺麗に入るのですがそれ以上になると全画面表示ができなくなってしまいます。

とりあえずyoutube動画を入れたいのならいいですが、動画をもっとインパクトあるように見せたいなどの場合はこの挿入の仕方はあまりオススメできません。

その場合は次やり方で動画を埋め込んでください。

1-2.コードを取得し埋め込む

先ほどはURLを投稿画面にコピペするだけで動画を埋め込むことができましたが、サイズを変えたり表示の仕方をカスタマイズしたい場合はこの埋め込み方法をオススメします。

では、まずは先ほどと同じくYoutubeにアクセスしてサイトに張り付けたい動画を表示して動画の評価の隣にある共有のテキストをクリックしてください。

youtube,動画,埋め込む

ACTION

① 投稿に挿入したいYouTube動画の画面を表示する
② 共有のテキストをクリックする

 
すると以下のような画面がポップアップで表示されますので、埋め込むのボタンをクリックしてください。
youtube動画,共有,埋め込む
ACTION

埋め込むのボタンをクリックする

すると、今度は以下のような画面に切り替わりますので右下のコピーをクリックしてください。

ACTION

・コピーをクリックする

コピーをクリックするとコードを自動的にコピーすることができるので、投稿画面のテキストエディターに貼り付けていきます。

ACTION

① 投稿画面を開きテキストエディターをクリックする
② 動画を挿入したい場所に貼り付けを行う

青で囲ってある部分が先ほどコピーしたコードになります。

これで終わりではありません。

今回はサイズを指定するのでサイズの変更をしていきましょう。やり方は先ほどのコードの

width=”560″ height=”315″

の数値を変更するだけです。最近ではレスポンシブが普通なのでスマホでも綺麗に表示させるために「%」で指定をすることをオススメします。

今回は全画面表示をしたいので下記のようにwidth=”100%” height=”480″と入力してください。

ACTION

① 投稿画面のテキストエディターで挿入したい場所にコードを貼り付ける
② 「width=”560″ height=”315″」の数字部分を「width=”100%” height=”480″」に編集する

これはどういう設定かというと、横幅を100%で表示をして縦は480の大きさに指定しています。これでPCでは画面いっぱいに動画を表示しスマホで閲覧しても綺麗に画面いっぱいに入れることができます。

これで、

が、当然高さの比率はあってないのが弱点ですけどね。

もし、この比率を合わせて綺麗に表示をしたいのならばCSSの設定が必要になります。

CSS
.movie{
position:relative;
width:100%;
}
.movie iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

これをstyle.cssなどに入力・保存をしておけばあとは

HTML
<div class=”movie”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/HFlgNoUsr4k” frameborder=”0″ allowfullscreen></iframe>
</div>

このように、Youtubeのタグを<div class=”movie”></div>で囲うだけで全画面表示をすることができるようになります。このようにURLを入力しないやり方の場合はサイズなど細かい設定ができます。

更にこのやり方では、細かい設定をすることができます。

1-3.表示の仕方をカスタマイズする

先ほど、タグをコピーする段階の画面で投稿に表示をする際の細かい設定をすることができます。

かなり使える設定なので各項目を紹介していきましょう。

 

□開始位置

動画のスタート時間を調整することができます。動画の中でも特にここだけを見てほしいという場合などに使えます。上の場合は3時間46分10秒からスタートさせています。

□動画が終わったら関連動画を表示する

YouTubeの埋め込み動画は再生完了後に関連動画が自動的に他の動画の一覧が表示されるのですが、このチェックをはずすと関連動画が表示されません。

□プレイヤーのコントロールを表示する

YouTubeの下には通常は再生ボタンや音量の調整をするコントロールバーが表示されていますが、このチェック項目を外すと表示を消すことができます。

□動画のタイトルとプレーヤーの操作を表示する

埋め込んだ動画の左上には動画のタイトルが表示されますがこのチェックを外すとタイトルが表示されなくなります。

 

このように主に4つの設定をすることができます。(プライバシー強化モードを有効にするは除外しました。)
あなたの投稿に表示したい形式を選択して設定をしてから投稿画面に貼り付けてください。

・・このやり方だけを覚えておけばYouTube動画をWordpressに挿入する基本は完全にオッケーです。

2.動画・音声(mp4/mp3)を埋め込む方法

では、続いて今度はYoutubeにアップロードせずに動画を埋め込む方法について解説をしていきます。これは画像のアップロードと挿入方法とやり方は一緒です。

音声も同じ要領で挿入することができますが、ここでは動画を埋め込む方法について解説していきます。

1-1.FTPソフトorメディアで動画をアップロードする

まず最初に動画をアップロードしなければ表示できないのでアップロードをしていきましょう。アップロードの仕方はFTPソフトから直接サーバーにアップする方法とWordpressのメディアからアップロードする方法です。

動画のファイル容量が大きい場合はFTPソフト
動画のファイル容量が小さい場合はメディア

でアップロードすることをオススメします。(ファイル容量が大きい場合は時間がかかりすぎるので)今回は管理画面のメディアからアップロードしていくのではなく、下記のように投稿画面から【メディアを追加】をクリックしてメディアを追加画面でドラッグアンドドロップで動画をアップロードします。

ACTION

① 投稿画面の左上にあるメディアを追加をクリックする。
② 動画ファイル(mp4形式)をドラッグする
③ メディアを追加画面にドロップする

ちなみに動画はWMVではなくmp4形式にしてください。(音声はmp3)動画のファイル容量によっては時間がかかりますが終了すると以下のような画面になります。

これでアップロードが完了しました。

1-2.動画を挿入する

アップロードが完了したら早速動画を挿入していきます。動画の挿入方法は簡単で添付ファイルの詳細で設定をしてから投稿に挿入ボタンをクリックするだけです。

 

ACTION

タイトルに動画のタイトルを入力する
埋め込みまたはリンクをメディアプレイヤーを埋め込むを選択する
 投稿に挿入ボタンをクリックする

これで下記のように埋め込みができます。

 

 

同じ要領で簡単に音声も挿入することができます。

3.Wordpres動画をカスタムするプラグイン3選

最近動画は情報発信の上では非常に有用な媒体なのでどうせ使うのならばもっといろいろカスタマイズをしたり表示の仕方を工夫したい方も多いはずです。

そこでここでは動画の表示をカスタマイズできるプラグインを紹介しておきます。

必要に応じて導入を検討してみてください。

3-1. Video-thumbnails

YouTubeなどのサムネイル画像を自動的に取得してワードプレスのアイキャッチに自動的に登録してくれるプラグインです。動画プロモーションをする際や紹介したい動画があるときには非常に便利です。特に設定の必要がなくデフォルトで使用できます。

3-2. WP-Nocodo

YouTubeやVimeoは世界的ですが,日本を代表する動画サイトといえば「ニコニコ動画」ですが、ニコニコ動画はデフォルトのままだとWordpressサイトに挿入ができないのですがこのプラグインを使うと挿入することができます。

3-3. Video Sidebar Widgets

これはYouTubeの動画をサイドバーに公開するプラグインです。ただ表示をするのならば普通にできるのですがこのプラグインを挿入すると記事事に表示する動画を変えることができます。YouTubeの関連動画を自分で作るみたいなかんじですかね。

3-4 YouTube Adds Pro

このプラグインは有料ですがWordpressで動画を有効活用したいのならば絶対に導入しておきたいプラグインです。これまで解説してきた設定が簡単にできるのもありますが、広告などを削除できたりデザインを挿入できたりします。

でも、何よりものメリットは広告を表示することができるところです。

他人の動画でも自分の好きな広告を表示してしまうというヤバすぎるプラグインです。もちろん自分の動画にも思い通りの広告を好きなタイミングで挿入することができるので非常に効果的に動画を使うことができます。

このプラグインは体験サイトで実際にお試しができるので使ってみて必要ならば手にしてみてください。

最後に

さて、今回はWordpressに動画を挿入するための代表的な方法を2つ紹介しました。

最近では情報処理もシンプルなものになっているため動画は上手に使ったほうがいいです。実際YouTubeは検索エンジンよりも簡単に再生回数を稼ぐことができる現代はWordpressでも動画は上手に活用したほうがいいかもしれません。

このサイトでも落ち着いたら動画でWordpressの使い方の授業をやろうと思っています。

  • このエントリーをはてなブックマークに追加
Comment form

*