初心者でも簡単!WordPressでYouTube動画を埋め込む方法

SNS

WordPressのブログやホームページにYouTubeの動画を埋め込むにはどうしたらいいでしょうか。難しそうに思えるかもしれませんが、サイトに動画を埋め込む方法は意外と簡単です。近年動画は、文章だけでは伝わらない情報を伝える点で重要な役割を果たしています。この記事では、初心者の方でも簡単にできる方法を画像付きで説明しています。

 

YouTube動画を埋め込む方法

簡単な方法は以下の二つです。

  1. URLを直接貼り付ける
  2. 埋め込みコードを貼り付ける

1つずつ解説します。

この記事では、WordPressのクラシックエディタでの埋め込み方法を説明しています。また、プラグイン「TinyMCE Advanced」を使用しています。

 

URLを直接貼り付ける

最も早く豪快に表示させる方法です。

画像のように、YouTubeのアドレスバーに表示されているURLをコピーします。

ビジュアルエディタで、コピーしたURLを貼り付けます。

プレビューで確認すると画像のようになります。

この方法は簡単最速ですが、画像のサイズ変更ができません。

 

埋め込みコードを貼り付ける

まず、埋め込みたいYouTube動画から埋め込みのためのコードを取得します。

対象のYouTube動画再生画面の右下にある「共有」をクリックします。

画像のような表示になりますので、「埋め込む」を選択します。

「動画の埋め込み」が表示されますので、右下にある「コピー」をクリックして、埋め込みコードをコピーします。赤線の部分が、動画の幅と高さを表しています。デフォルトでは以下の通りです。

幅:width=”560″
高さ:height=”315″

 

次に、埋め込みコードのの挿入方法です。

動画を埋め込みたい部分で、画像のように「挿入」から「メディア」を選択します。

画像のような画面になるので、「埋め込む」のタグを選択し、枠内に先程コピーした埋め込みコードをそのまま貼り付けます。その後、「OK」をクリックします。

これで埋め込みコードによって動画を表示させることができました。

 

動画の表示サイズ変更

貼り付けた動画のサイズ変更も可能です。

動画を選択した状態で、先程と同様に「挿入」から「メディア」を選択し、今度は「一般」タグで編集します。

「縦横比を保存」にチェックが入っていることを確認して、希望のサイズに数字を変更します。幅か高さどちらかの数字を変更すれば、縦横比(通常16:9)を保持したまま自動調整してくれます。最後に「OK」をクリックして反映させます。

使用しているテーマによっては、この調整ではサイズ変更が反映されないことがあります。その場合、divタグで埋め込みコードを囲み、CSSでスタイルを調整する必要があります。中級者向きの編集になりますが、基本的にHTMLやCSSをコピペするだけです。ググるといくつかのサイトで対応方法が紹介されていますが、初心者向けのこの記事では割愛します。

 

動画の開始位置の設定

埋め込みコード取得画面で、動画再生の「開始位置」を調整できます。チェックボックスにチェックを入れ、スタートさせたい動画の位置を数値で入力するだけです。この調整を行った後にコードを「コピー」して貼り付けます。

 

まとめ

いかがでしたか。今回はWordPressでYouTube動画を埋め込む方法についてご紹介しました。初心者の方でも簡単にできる方法2つです。

  1. URLを直接貼り付ける
  2. 埋め込みコードを貼り付ける

2に関しては

  • 表示サイズ変更
  • 開始位置の設定

もできます。

この記事が皆さまのお役に立つことを願っています。今回もお付き合いいただきありがとうございました。

 

>コアース株式会社

コアース株式会社

〒530-0041 大阪市北区天神橋1丁目18-25 第3マツイビル401号室

Coeure Design(コアース・デザイン)は大阪を拠点に業務システム開発を行なうコアース株式会社が運営するホームページ制作サービスです。Webサイトのデザインから,他のシステムとの連携,アフターサービスまで総合的にサポートいたします。

CTR IMG