注目度の高い記事
YouTube の動画をブログに埋め込む方法とその注意点

 

わかば
山本さん、ブログの記事に動画を埋め込みたいんですけど
そういうのってちょっと難しそうですよね...

山本
すごく簡単にできるから教えてあげるよ

わかば
ホントですか!? ぜひお願いしますー!

 

ワードプレスブログの記事内に、YouTube などの動画を埋め込む方法を解説します。

このページを読んでわかること
  • ブログの記事内に自前のMP4動画を埋め込む方法
  • ブログの記事内にYouTube動画を埋め込む方法
  • 埋め込んだ動画の中央寄せなどのカスタマイズ法
  • 動画を埋め込むときに気を付けたいこと

1.自前の動画(MP4)をブログ記事に埋め込む方法

まずはあなたが自前で用意した動画を、ブログに埋め込む方法から解説します。

 

動画のファイル形式(拡張子)は

「AVI」「MOV」「WMV」「MKV」などの多くの種類がありますが

一番汎用性の高い「MP4」に事前に変換しておくことをおすすめします。

 

MP4動画を埋め込む方法は、画像を設置するのと全く同じ手順でできます。

 

投稿の編集画面で画面上の メディアを追加 をクリックします。

投稿の編集画面でメディアを追加をクリック

 

メディアを追加画面が表示されるので、後はこの画面に埋め込みたい動画をドラッグ&ドロップするだけでOK。

メディアを追加画面に動画ファイルをドラッグ&ドロップする

動画のアップロードが完了したら

右下の 投稿に挿入 ボタンをクリックすれば動画の埋め込みは完了です。

 動画ファイルはサイズが大きいものが多く、この方法だとレンタルサーバーの容量を圧迫してしまうので、あまりおすすめできません。

 

山本
ここからはYouTube動画を埋め込む方法の解説です

わかば
そうそう、それが知りたかったんです!

2.YouTube動画を埋め込む方法(基本編)

まずは、YouTubeの埋め込みコードを使って、動画を埋め込む方法から解説します。

 

埋め込みたいYouTubeの動画ページに移動して、動画下の 共有 をクリックします。

YouTubeの動画ページで共有をクリック

 

共有画面が表示されるので、埋め込む をクリックしましょう。

埋め込むをクリック

 

埋め込みコードが表示されるので、これをコピーします。

山本
右下の「コピー」をクリックすると簡単にコピーできます

動画の埋め込みコードをコピーする

 

ブログの投稿画面に戻って、テキストモードを選択してから

動画を設置したい場所にコードをペースト(貼り付け)しましょう。

テキストモードで動画コードをペーストする

 

投稿画面にYouTubeの動画が設置されました。

わかば
わお! カッコイー!!

山本
プラグインを使うともっと簡単に埋め込めるよ

 

3.YouTube動画を埋め込む方法(プラグイン編)

TinyMCE Advanced プラグインを使った動画の埋め込み方法です。

プラグインのインストールがまだの方は、以下のページを参照してください。

参考リンクTinyMCE Advanced の設定方法と使い方

 

このプラグインを使って動画を埋め込む方法は2種類あります。

  • URLで埋め込む方法
  • 埋め込みコードを使って埋め込む方法

それぞれ解説していきます。

 

3-1 URL で埋め込む方法

埋め込みたいYouTubeの動画ページに移動したら

ブラウザのアドレスバー または 先ほどの共有画面のURL をコピーしましょう。

ブラウザのアドレスバーのURL

または

共有画面のURL

 

ブログの投稿画面で、ツールバーの メディアを挿入/編集 をクリックします。

山本
ツールバーに「動画の挿入/編集」がない場合は
TinyMCE Advanced の設定ページで追加しましょう

メディアの挿入/編集をクリック

 

 

ソースの枠にコピーしたURLをペーストして OK をクリックします。

URLをペーストしてOKをクリック

山本
これでさっきと同じく動画が表示されます

 

3-2 YouTube の埋め込みコードで埋め込む方法

見出し2 の基本編と同じ方法で、YouTube動画の埋め込みコードをコピーしましょう。

ブログの投稿画面で、メディアを挿入/編集 をクリックします。

メディアの挿入/編集をクリック

 

今度は、埋め込む を選択しましょう。

メディアを挿入/編集画面で埋め込むをクリック

 

埋め込みコードを枠の中にペーストして、OK をクリックしましょう。

埋め込みコードをペーストしてOKをクリック

 

山本
実際に埋め込んだ動画はこのように表示されます

わかば
うっわ~!カンタンですねぇ!

 

山本
YouTube動画の埋め込み方法についてはこれで以上。
ここからは、埋め込み時に使える便利なテクニックを紹介します!

4.ユーザーの利便性を高める動画埋め込みテクニック

4-1 埋め込み動画のサイズ変更

URLで動画を埋め込む時に出てくるサイズの欄の数字を変更することで

埋め込み動画のサイズを変更することができます。

メディアのサイズを変更

 

縦横比を保存 のチェックを外すと、縦と横のサイズをそれぞれ

変更できるようになりますが、動画のバランスが悪くなるのであまりおすすめできません。

 

4-2 動画の開始位置(時間)を指定

YouTube の共有画面や、動画の埋め込み画面にある 開始位置

任意の時間を入力することで、再生時の動画の開始位置を指定することができます。

動画の開始位置を指定できる

 

指定する際は、「半角数字」 で 間に「 : 」をはさんで入力しましょう。

例:3分38秒から動画を再生したい場合 ⇒  3:38 と入力。

 

4-3 動画をセンタリング(中央寄せ)したい場合

わー研。でも使用中の Diver だと

動画を埋め込んだ時点で自動でセンタリングしてくれますが

他のテーマだと、基本的には埋め込み動画が左寄せになってしまうことが多いです。

左寄せになった埋め込み動画の例

 

テキストや画像なら、中央揃え を使うことで、簡単にセンタリングできるのですが、埋め込み動画はセンタリングされません。

中央揃え

 

そこで、このタグで埋め込みコードを囲んであげることで、センタリングすることができます。

<div style="text-align: center;">埋め込みコード</div>

 

実際に囲んでみたのがこの画像です。

埋め込み動画をセンタリングするコード

山本
これで埋め込んだ動画が、画面中央に表示されるようになります

わかば
早速 AddQuicktag に登録しておきます!

 

5.YouTubeの動画を埋め込むときの注意点

わかば
ハッ! !
ひょっとしてYouTubeにアップされるバラエティー番組とかを
ブログに貼りまくったらめちゃくちゃ稼げてしまうのでは...

山本
わかばちゃん。それはやったらダメなんだよ...

 

YouTube動画の埋め込みは、使い方次第ではすごく便利なものなのですが

埋め込む際には、著作権に気を付ける必要があります。

 

特に気を付けておきたいのが、以下の3点。

  • テレビ番組(バラエティーなど)
  • アニメや映画など
  • MVなどの音楽系

 

地上波のバラエティー番組やアニメなど、違法アップロードされているものはもちろんのこと

公式チャンネルでアップされている、MV(ミュージックビデオ)なども基本的にはNGになります。
著作権フリーの表記があるものや、自分で作成した動画以外は

ブログに埋め込まない方が無難だと言えますね。

 

そのほかにも、テキストがほとんどなく埋め込み動画だらけの

ブログ記事の作成なども YouTube から禁止されているので注意しましょう。

 

その他のYouTubeの禁止事項については、以下の利用規約ページを参照してください。

参考リンクYouTube 利用規約(公式サイト)

 

さいごに

今回は、ブログに動画を埋め込む方法について解説しました。

 

使いこなせばユーザーの利便性を高めることができるうえ

SEOでの良い効果も見込める埋め込み動画ですが、くれぐれも著作権には注意しましょう。

 

最後にこのページのおさらいをしておきます。

  • 自前の動画をそのまま埋め込むのはあまりメリットがない
  • YouTube動画を埋め込む方法は3種類ある
  • 埋め込み時のテクニックについての解説
  • 動画を埋め込むときは著作権に注意する必要がある

 

わかば
なーんだ。稼げると思ったのに残念です

山本
そもそもYouTubeで見れるテレビ番組って
違法アップロードのものが多いからね

わかば
ここは気を取り直して
オリジナル記事でコツコツと頑張っていきます!

山本
そうそうその意気!
ブログは継続と積み重ねが大事だからね!

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事