ワードプレスでyoutube動画を埋め込む方法とは?

ワードプレス youtube 埋め込み 使い方

WordPress(ワードプレス)の記事中に「YouTubeの動画」を入れたい!アップロードしたい!・・けどよくわからないし、上手くいかないから誰か教えてください。
そんな疑問にお答えします。

ぽけ
マサムネ
文章だけだと伝わりづらいことも動画を使うだけで、何倍も伝わりやすくなります。
スポンサーリンク

WordPressでyoutube動画を埋め込む方法

WordPressでyoutube動画を埋め込む方法は、いくつか存在します。
今回は初心者さんでもやりやすい方法から、ちょっとした小技を含めお話していきたいと思います。

URLを使用する

もっとも簡単にyoutube動画を記事の中に埋め込む方法は、URLをコピペする方法です。
以下で詳しく解説していきます。

まずは、記事内に入れたい(埋め込みたい)youtube動画のページを開きます。
今回は、例として「スピッツの優しいあの子」のyoutube動画を使って説明します。

任意のページを開いて、アドレスバーからURLをコピーします。

YouTubeアドレスバーのURLをコピー

 

次に、投稿の編集画面を開き、動画を入れたい箇所をクリックしてからURLを貼り付けてください。
貼り付けるだけで、下図のようなイメージになります。

動画を入れたい部分をクリック

動画をURLで埋め込んだイメージ

ぽけ
マサムネ
上記のやり方が一番簡単でシンプルな埋め込み方法です。何か埋め込みにこだわりがない限りは基本的にこのやり方がベターです。

 

埋め込む用のコードを使用する

次に「埋め込み用のコード」を使用したやり方をお話します。
この方法の特徴は、縦横の幅を指定できたり、動画が始まるタイミングを指定できるところです。

まず、YouTubeで任意のページを開き「共有」という部分をクリックします。

共有をクリック

 

すると、共有のポップアップ画面が開かれるので、「埋め込み」という部分を押します。

共有のポップアップ画面

 

「動画の埋め込み」用のコードが表示されるので、コードを選択し、コピーをクリック。

「動画の埋め込み」用のコード

 

投稿の編集画面を開き、「挿入→メディア」をクリック。

挿入→メディア

 

メディアを挿入・編集が表示されるので、「埋め込む」を選択し、埋め込みコードをペースト(貼り付け)します。

埋め込みコードをペースト

 

動画のサイズを変更したい場合は、「一般」を選択し、サイズの部分に任意の数字を入力します。縦横比を保存にはチェックを入れたままで大丈夫です。
編集が終わったら「OK」ボタンをクリック。

動画のサイズを変更

 

すると、以下のイメージのように、動画サイズを指定した状態で、YouTube動画を埋め込みできます。

動画サイズを指定した状態

 

■開始位置を変更したい場合
YouTube動画が始まるタイミングを変更したい場合は、以下のような形で、動画の埋め込みコードをコピーする画面にて「開始位置」にチェックをいれて開始位置を設定してから、埋め込みコードをコピーしてください。

動画の開始位置を設定

 

以下は、実際にYouTube動画を埋め込みして、記事を投稿したイメージ画像です。

実際の埋め込み動画

ぽけ
マサムネ
■YouTube動画のサイズが変更されない場合
お使いのWordPressテーマによっては、CSS(スタイルシート)で、動画のサイズを指定している場合があります。そちらの指定が優先されているとサイズ変更しても効かないため、その場合は、CSSを変更するなどカスタマイズが必要です。

 

動画のレスポンシブ化

ここでいうレスポンシブ化とは「レスポンシブデザイン」のことをいいます。
昨今、パソコン以外にもスマートフォンやタブレット等からWEBサイトを閲覧する機会が増え、デバイスごとにサイトやブログも最適化が求められるようになりました。

例えば、以下はスマートフォンから見た場合のイメージ画像です。
動画の横幅が最適化されていないため、途中で切れてしまっていることがわかります。

動画が途中で切れている状態

 

一方、動画をレスポンシブ化した場合が以下のイメージです。
スマートフォンでも最適化されているため、見やすい表示でユーザーに案内できます。

レスポンシブ化された動画表示例

 

動画をレスポンシブで埋め込む方法

YouTube動画をレスポンシブで埋め込むには、主に以下の方法があります。

  • プラグインを使用する
  • CSSを使用する

 

プラグインはサイトが重くなる可能性もあるので、今回はCSSを使用する方法をご紹介します。

ぽけ
マサムネ
お使いのWordPressテーマによっては、すでにYouTube動画などがレスポンシブ対応されている場合があります。

 

CSSを使用する

まずは、埋め込み用コードをコピーしたら、以下のイメージのように「テキスト」エディターに切り替えて、埋め込み用コードを貼り付けます。

「テキスト」エディターに切り替えて、埋め込み用コードを貼り付ける

 

次に、埋め込み用コードをdiv要素で囲みます。
div要素には任意のクラス名を指定しておきます。
(今回は「movie-box」としています)

埋め込み用コードをdiv要素で囲みます

 

同じように囲めたら、更新しておきます。
次にCSS(スタイルシート)を記述していきます。

 

CSSを記述するには、いくつか方法がありますが、今回は以下の手順でおこないます。
まず、「外観→カスタマイズ」をクリックします。

外観→カスタマイズ

 

カスタマイズ画面に遷移すると思うので、「追加CSS」をクリックします。

「追加CSS」をクリック

 

すると、CSSが追加できるエリアが表示されますので、

CSSが追加できるエリア

 

以下のCSSをコピーして貼り付けます。

.movie-box {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
 
.movie-box iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

 

以下は、貼り付けた場合のイメージ画像です。

貼り付けた場合のイメージ

 

最後に「公開」ボタンを押して完了です。

公開ボタンで完了

 

上記でご説明した通り、

  1. YouTube動画の埋め込みコードをdiv要素で囲む
  2. CSSを追加する

この2つの作業が問題なく完了していれば、YouTube動画のレスポンシブ対応ができていると思います。

まとめ

今回は「ワードプレスでyoutube動画を埋め込む方法とは?」をテーマにお話させていただきました。
ブログも人気ですが、YouTubeなどの動画プラットフォームも人気ですので、撮影した動画をYouTubeにアップロードしている人も多いと思います。

文章だけだと、どうしても伝わりづらい内容は、やはりYouTube動画などを取り入れることでグッと伝わりやすさがアップすると思いますし、すでに取り入れている方も多くいらっしゃいます。

ただ、ユーザーのネット環境によっては、ギガ不足による速度制限などの関係で動画より文章を好む人もいるため、文章を使って説明やコンテンツを作ることも大切です。
(最近はキャリアなどのプランより、モバイルWiFiのほうが安くてギガの容量も多いので人気のようですね)

また、動画だと基本すべて目を通さないと内容が把握しづらいですが、文章だと流し読みや要点だけをチェックすることもできます。

どちらにおいてもメリット・デメリットがありますが、今回ご紹介した内容を参考に、YouTube動画を記事内に埋め込んでみてください。

人気のWordPressテンプレート
WordPressのテーマ(テンプレート)って、沢山あるけど無料と有料どっちが良いの?
そんな疑問にお答えすべく、おすすめのWordPressテーマをプロの目線でまとめてみました。
良かったら「フォロー」してね。
有益な情報を定期的につぶやき中。
お米と味噌汁がすきです…
マサムネ

フリーランスとして独立しブログ運営に勤しんでいる元WEBデザイナー。
記事を書くのって大変だけど色々な気付きがあって楽しい!
虚弱で家族に迷惑をかけてきたので、どんな親孝行ができるかプラン思考中。
日々穏やかでストレスを溜めない生活を心がけています。
フリーランス10年/ブログ10年/コンテンツSEOからの月収6桁達成
詳しいプロフィールはこちら

マサムネをフォローする
使い方
スポンサーリンク
ぽけぶ
タイトルとURLをコピーしました