【お知らせ】Windows・office関連の記事はデジタル知恵箱サイトへ移行しました。

【YouTube】WordPressブログに動画を埋め込む方法|URL貼り付け・サイズ調整・便利設定まで解説

YouTube動画のブログの埋め込み手順・設定について

自分のブログ記事にYouTube動画を埋め込みたいと思ったことはありませんか。
現在のWordPress(ブロックエディタ)では、実はとても簡単に動画を埋め込むことができます。基本は「動画のURLを貼り付けるだけ」。特別なコードを扱う必要はありません。
この記事では、YouTube動画をWordPressに埋め込む基本手順から、サイズ調整の考え方、便利な設定方法まで、初心者の方にもわかりやすく解説します。

目次

WordPressでYouTube動画を埋め込む一番簡単な方法

疑問

YouTubeを埋め込むのはどうしたら良いのかな?

現在のWordPressでは、YouTube動画のURLをそのまま記事編集画面に貼り付けるだけで、自動的に動画が埋め込まれます。

手順は次の通りです。

  1. YouTubeで埋め込みたい動画を開き、ブラウザのアドレスバーからURLをコピーします。
  2. WordPressの投稿編集画面(ブロックエディタ)を開き、動画を表示したい位置にカーソルを置きます。
  3. そのままURLを貼り付けてEnterキーを押します。

これだけで、YouTube動画が自動的に埋め込まれます。
「YouTubeブロック」を選択してURLを貼り付けても同じ結果になります。特別な設定やHTMLの知識は必要ありません。 

埋め込みコードを使う方法(カスタムHTML)

通常はURL貼り付けだけで十分ですが、細かいカスタマイズをしたい場合は、YouTubeが提供する「埋め込みコード」を使う方法もあります。

手順は次の通りです。

  1. YouTubeの動画ページで「共有」をクリックします。
  2. 表示されるメニューから「埋め込む」を選びます。
  3. 表示されたiframeコードをコピーします。
  4. WordPressの編集画面で「カスタムHTML」ブロックを追加し、そこにコードを貼り付けます。

これで、HTMLコードを使った埋め込みが可能です。
「サイズ指定」や「再生オプションの調整」をしたい場合は、この方法が向いています。

動画プレーヤーのサイズについて

YouTubeの埋め込みコードは、初期状態で横560px・縦315px(16:9)に設定されています。
iframeコード内の width と height の数値を変更すれば、表示サイズを調整できます。

例:
width=”560″ height=”315″ の部分を変更することでサイズ変更が可能です。

ただし、最近のWordPressテーマの多くはレスポンシブ対応(画面幅に合わせて自動調整)になっています。
その場合、無理に数値を固定せず、テーマに任せたほうがスマホやタブレットでも自然に表示されます。

「スマホで表示がはみ出る」「横幅が崩れる」といった場合のみ、CSSでレスポンシブ対応を調整する方法を検討すると良いでしょう。

埋め込み時に使える便利な設定(パラメータ)

ここからは、埋め込みコードを使う場合に指定できる「パラメータ」について解説します。

標準設定では埋め込み動画は再生が終わると関連動画が画面に表示されます。

関連動画を表示しないようにするには「rel」パラメータを使います。

下記にカスタマイズの一部を記載しました。

埋め込みコードを使う場合、URLの末尾にパラメータを追加することで挙動をカスタマイズできます。

よく使われる例は次の通りです。

関連動画の表示を抑制:rel=0
自動再生:autoplay=1(※環境によっては音声付き再生は不可)
途中から再生:start=秒数
途中で停止:end=秒数
開始と終了を同時指定:start=30&end=60
コントロール非表示:controls=0

具体的なコード例は次の表を参照してください。

設定カスタマイズ方法例文
おすすめ動画を非表示「?rel=0」を追加<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?rel=0” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
自動再生
「?autoplay=1」を追加
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?autoplay=1&mute=1” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
途中から再生「?start=秒数」を追加<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?start=30” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
動画を途中で停止「?end=秒数」を追加<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?end=30” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
途中で再生して停止「?start=秒数」を追加 「&end=秒数」をさらに追加<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?start=30&end=60” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
コントロールパネルの非表示「?controls=0」を追加<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/○○○○?controls=0” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

これらは iframe の src のURLの末尾に追加して使います。

※ これらのパラメータは、YouTubeやブラウザの仕様変更により、期待通りに動作しない場合があります。

※ 最近のブラウザでは、autoplay=1 だけでは再生されず、&mute=1 を併用しないと自動再生されない場合があります。

YouTube動画を埋め込むメリット

YouTube動画を記事に埋め込むことで、次のようなメリットがあります。

・文章だけよりも内容が伝わりやすい
・記事の説得力や理解度が高まる
・読者の滞在時間が伸びやすい
・動画はYouTube側で配信されるため、サーバー負荷を抑えられる

関連記事

YouTube埋め込み動画をスマホに最適化する方法についてを

で紹介しています。

まとめ

現在のWordPressでは、YouTube動画の埋め込みはとても簡単です。
基本は「動画のURLを貼り付けるだけ」でOK。
細かい調整をしたい場合のみ、埋め込みコード(カスタムHTML)を使えば十分対応できます。

最初はシンプルな方法から始めて、必要に応じてサイズ調整や再生設定を追加していくのがおすすめです。
YouTube動画をうまく活用して、よりわかりやすく魅力的な記事を作っていきましょう。

 

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次