ワードプレスの記事にYouTube動画を埋め込む方法は?貼り付けるだけで超簡単!

WRITER
 
この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

様々な動画が投稿されているYouTube。

見入ってしまうと時間があっという間に過ぎてしまいますよね(笑)

そんなYouTube動画をワードプレスの記事に埋め込む方法を紹介します!

YouTube動画をワードプレスの記事に埋め込む方法

YouTube動画をワードプレスの記事に埋め込む方法は2つあります。

  • 動画のURLをコピペする(簡単)
  • 埋め込みコードを取得して貼り付ける(カスタマイズ出来る)

それぞれ説明していきますね!

 

動画のURLをコピペして埋め込む

こちらはワードプレス限定の方法になりますが、簡単にYouTube動画を埋め込むことができます。

埋め込みたいYouTube動画の下にある「共有」リンクをクリックします。

 

すると動画のURLが表示されるので、それをコピーします。

 

記事投稿画面を開き、コピーしたURLを貼り付けます。

コピーするのは「ビジュアル」モードでも「テキスト」モードでもOK。

プレビューで表示すると、YouTube動画が埋め込まれているはずです。

 

埋め込みコードを取得し、動画を埋め込む

動画の下にある「共有」リンクをクリックします。

 

するとリンクの共有方法が選択出来るので「埋め込む」をクリックします。

 

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

動画の開始位置を指定したい場合は、「開始位置」のチェックボックスをオンにして、開始位置の指定(時間を入力)してくださいね。

その他にも埋め込みオプションが指定できますが、必要に応じてチェックのオン・オフを切り替えてください。

 

記事作成画面を開き、「テキスト」モードにコピーした埋め込みコードを貼り付けます。

 

するとこのような感じでYouTubeが埋め込まれているはずです。

 

埋め込みコードにするメリットは、先ほどもちらっと書きましたが、カスタマイズ出来ることです。

例えば、埋め込み動画の大きさ。

 

埋め込みコードはこのような感じですが、

そのなかの

を変更します。

例えば、

にしてみましょう。

するとこのような感じで表示されます。

ちょっと小さいですね(笑)。

 

他にも動画画面の上にあるタイトルバーを非表示にすることも出来ます。

「showinfo=”0″」を追加してみます。

すると、画面上のタイトルバーが非表示になります。

 

それではカスタマイズコードをまとめてみますね。

width=”XXX”

※「XXX」には表示したい大きさの数字を入れます。

「width=”200″」など

 

高さ

height=”XXX”

※「XXX」には表示したい大きさの数字を入れます。

「height=”100″」など

(例)
<iframe width=”200″ height=”100″ src=”https://www.youtube.com/embed/c6rP-YP4c5I></iframe>

 

枠線の表示・非表示

frameborder=”0″:非表示(デフォルト)
frameborder=”1″:表示

動画画面に灰色の枠線を表示するかしないかを設定することが出来ます。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I” frameborder=”1″></iframe>

ちょっと分かりづらいかもしれませんが、上が枠線なし、下が枠線ありです。

 

自動再生

autoplay=0:手動再生(デフォルト)
autoplay=1:自動再生

ページを開いた時に、動画を自動再生させるか設定することが出来ます。

追加する場合は、以下のように「src=”~」の後に「?autoplay=0」を連結します。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?autoplay=0″></iframe>

 

開始位置の指定

start=XXX

「start」は動画の再生開始位置を設定することが出来ます(秒数で指定)。

追加する場合は、以下のように「src=”~」の後に「?start=XXX」を連結します。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?start=30″></iframe>

 

終了位置の指定

end=XXX

「end」は動画の終了位置を設定することができます(秒数で指定)。

追加する場合は、以下のように「src=”~」の後に「?end=XXX」を連結します。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?end=30″></iframe>

 

コントロールバーの表示・非表示

controls=0:非表示
controls=1:表示(デフォルト)

動画下のコントロールバーの表示・非表示を設定することが出来ます。

追加する場合は、以下のように「src=”~」の後に「?controls=X」を連結します。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?controls=0″></iframe>

上が非表示、下が表示設定です。

 

タイトルの表示・非表示

showinfo=0:非表示
showinfo=1:表示(デフォルト)

画面タイトルの表示、非表示を設定することが出来ます。

設定する場合は、以下のように「src=”~」の後に「?showinfo=X」を連結します。

(例)
<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?showinfo=0″></iframe>

上が非表示、下が表示設定です。

関連動画の表示・非表示

rel=0:非表示
rel=1:表示(デフォルト)

動画終了時に関連動画を表示するか、しないかを設定することが出来ます。

これは埋め込みコードを取得する時にも、チェックボックスで指定できますが、直接コードを書いても出来ます。

設定する場合は、以下のように「src=”~」の後に「?rel=X」を連結します。

(例)

<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?rel=0″></iframe>

上が非表示、下が表示する設定です。

関連動画が他になくて分かりづらいのですが・・・。

 

複数の条件を設定する場合は?

「?」でつなぐ条件を複数設定する場合は「&」でつなぎます。

(例)

<iframe src=”https://www.youtube.com/embed/c6rP-YP4c5I?showinfo=0&controls=0″></iframe>

タイトルとコントロールバーが非表示になりました。

まとめ

YouTube動画をワードプレスの記事に埋め込む方法を紹介しました。

また新しいことが分かったら追加していきますね!

この記事を書いている人 - WRITER -
こんにちはNAHOです。 自分で選択できる人生を歩みたい、家族や大好きな人たちと豊かに暮らしたい。 そう思った私は、ネットビジネスの道へと歩み始めます。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。

Copyright© トラベラーズサロン , 2018 All Rights Reserved.