• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • お問い合わせ
FOXWP / WordPress / WordPressでYouTube動画を埋め込み表示する方法

WordPressでYouTube動画を埋め込み表示する方法

最終更新日:2021年10月6日

WordPressでは、YouTube動画をさっと簡単に埋め込むことができます。また必要に応じて表示サイズの調整や開始時間の設定なども行えます。

この記事では、WordPressで記事やウィジェットにYouTube動画を埋め込む方法を解説します。

加えて、埋め込みに役立つ豆知識も紹介しますので活用してみてください。

目次 非表示
1 YouTube動画のURLを貼り付ける
2 埋め込みショートコードを書く
3 iframeタグを使用する
4 ウィジェットでYouTube動画を埋め込む
5 YouTube動画の埋め込みができない時の対処法
6 知っておくと役立つ豆知識
6.1 動画の開始時間を指定する
6.2 YouTube動画を中央揃えする(センタリング)
7 WordPressでYouTube動画の埋め込み方法まとめ

YouTube動画のURLを貼り付ける

WordPressでYouTube動画を埋め込むのに、1番簡単な方法は記事編集画面でURLを貼り付ける方法です。

YouTube動画のURLを記事編集画面で貼り付ける

URLの貼り付けは、ブラウザのアドレスバーに表示されるURLでも共有用の短縮URLでも可能です。

  • 通常URL ⇒ https://www.youtube.com/watch?v=〇〇〇〇
  • 短縮URL ⇒ https://youtu.be/〇〇〇〇
注意
URLを貼り付ける際に同じ行に文字を入れてしまうと、埋め込み表示がされませんので気をつけてください。

YouTube動画の埋め込みができない例

埋め込みショートコードを書く

埋め込み用のショートコードを使用すると、埋め込み表示するYouTube動画の幅と高さのサイズ指定ができます。

埋め込み用のショートコードで、埋め込みしたいURLを囲う形で記述します。

YouTube動画URL

ショートコードにあるwidthおよびheightの数値はお好みの値に変換できます。この数値で埋め込み表示する動画の高さと幅を指定します。

もし、埋め込み表示に失敗した場合、ショートコード中にあるURLがハイパーリンクとして記事に表示されます。

iframeタグを使用する

YouTube動画の埋め込み表示に様々な設定をしたいなら、iframeタグを使用する方法がおすすめです。

iframeタグはYouTubeの動画ページより取得できます。

まず埋め込み表示をしたい動画ページを開きます。そして、動画の下にある「共有」をクリックします。

動画の共有をクリック

ポップアップが表示されるので、その中にある「埋め込む」をクリックします。

埋め込むを選択

ポップアップが切り替わり、iframeコードが表示されます。このiframeコードを記事編集画面で貼り付けてください。

iframeコードをコピーする

iframeコードをコピーする前に、下のオプション項目で開始時間や関連動画の表示などの設定を変更できます。

他にもiframeコードを用いた埋め込み表示では様々な設定が可能です。詳しくは、次のYouTube APIのページを参考にしてください。

参考ページ:YouTube 埋め込みプレーヤーとプレーヤのパラメータ

ウィジェットでYouTube動画を埋め込む

WordPress 4.8で動画ウィジェットが追加されました。

動画ウィジェットを使えば、サイドバーやフッターなどに簡単にYouTube動画を埋め込むことができます。

WordPress管理画面のメニューより、外観 ≫ ウィジェットをクリックします。

ウィジェット管理画面を開く

ウィジェット一覧の中に「動画」ウィジェットがあります。

  1. ウィジェット一覧の中から「動画」ウィジェットをクリック
  2. 表示したいウィジェットエリアを選択
  3. 「ウィジェットを追加」ボタンをクリック

上記操作が完了すると、選択したウィジェットエリアに動画ウィジェットが追加されます。

続いて、埋め込み表示する動画の設定を行います。「動画を追加」ボタンをクリックします。

動画ウィジェットの設定を開始

動画設定用のポップアップが表示されます

挿入する動画の設定

  1. 左のタブから「URLから挿入」を選択
  2. 埋め込み表示したいYouTube動画のURLを記入
  3. 「ウィジェットを追加」ボタンをクリック

そうすると、動画ウィジェットにURLを記載したYouTube動画が表示されます。あとは「保存」ボタンを押せば、ウィジェットへのYouTube動画の埋め込みは完了です。

ウィジェットにYouTube動画の埋め込みが完了した

YouTube動画の埋め込みができない時の対処法

WordPressでYouTube動画の埋め込みを行う場合に、設定はしたけど埋め込みができないトラブルにあうかもしれません。

その際は、次の記事を参考に対処してみてください。想定される問題への対処法が一通り記載してあります。

関連記事:WordPressでYouTube動画の埋め込みができない原因と対処法

知っておくと役立つ豆知識

ここでは、知っておくと役立つWordPressでのYouTube動画埋め込みの豆知識を紹介します。

動画の開始時間を指定する

iframeタグでの埋め込みはパラメータによる開始時間の指定が可能です。それは、URLの貼り付けおよびショートコードでも可能です。

次のコードのように埋め込むURLの最後に#t=2mと追加で記載します。

http://www.youtube.com/watch?v=〇〇〇〇#t=2m

http://www.youtube.com/watch?v=〇〇〇〇#t=2m

#t=2mと記載すると動画が2分から開始されます。この数値を変更することで開始時間を設定しておくことが可能となります。

また「m」の代わりに「s」を使用すると秒数でも開始時間の指定が可能です。

  • #t=〇s ⇒ 〇秒から動画開始
  • #t=〇m ⇒ 〇分から動画開始

YouTube動画を中央揃えする(センタリング)

YouTube動画を中央揃えにして表示する方法を紹介します。これは埋め込み用ショートコードおよびiframeタグを使用した方法で利用可能です。

次のように、

と

で囲みます。

<div style="text-align:center;">http://www.youtube.com/watch?v=〇〇〇〇</div>
とで囲む方法も中央揃えが可能ですが、このHTMLタグは廃止予定なので非推奨とされる方法です。

WordPressでYouTube動画の埋め込み方法まとめ

WordPressで記事にYouTube動画の埋め込み方法は主に次の3つになります。

  • URLを貼り付ける ⇒ 1番簡単
  • 埋め込み用ショートコード ⇒ サイズ指定が可能
  • iframeタグ ⇒ サイズ指定、他に様々な設定可能

埋め込み方法によって特徴が異なりますので、用途に合わせた方法を選びましょう。

カテゴリー:WordPress タグ:YouTube

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル
Previous Post: « WordPressでYouTube動画の埋め込みができない原因と対処法
Next Post: WordPressのクレジットやテーマ名を非表示または削除する方法 »

Primary Sidebar

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
レビューを見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

最新ニュース

  • 【カラフルボックス】夏のキャンペーン実施中【2021年8月31日まで】

最近の投稿

  • WordPressでおすすめのバックアッププラグイン5選
  • WordPressのPHP設定を変更する方法(php.ini)
  • WordPressでおすすめの画像圧縮プラグイン5選
  • WordPressの投稿編集画面でその投稿を表示する方法
  • WordPressの管理画面に再利用ブロックの管理を追加する方法

カテゴリー

  • WordPress
  • お役立ち情報
  • アフィリエイト
  • ドメインレジストラ
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2023 FOXWP All rights reserved.