YouTube

ブロック一覧へ戻る

YouTube 埋め込みブロックを使うと、YouTube の動画を再生ボタン付きで記事やページに埋め込むことができます。

動画を埋め込むには、YouTube のアカウントがなくても大丈夫です。

ただし、すべての動画がこの方法で共有できるわけではありません。パブリッシャーは、動画の設定で「埋め込みを許可」する必要があります。また、パブリッシャーによっては、動画を共有できる国を制限している場合もあります。

この設定は YouTube Studio で
動画を編集 > 更に表示 > 「埋め込みを許可する」にチェックを入れます

個人を特定できない視聴データが、YouTube およびビデオのパブリッシャーと共有されます。子どもが訪問するサイトをお持ちの場合は、YouTube のプライバシーポリシーや情報をご参照ください。

YouTube 動画を投稿やページに埋め込むための6つのステップ YouTube 動画を投稿やページに埋め込むための6つのステップ

  1. YouTube.com で動画を見つけ、ブラウザーのアドレスバーから動画 URL をコピーする。
  1. YouTube 埋め込みブロックを投稿に追加する。
空の行から「スラッシュ」コマンドでブロックを追加する

ブロック追加の詳しい方法はこちらをご覧ください。

  1. ステップ1でコピーした YouTube URL をペーストします。
  2. 「埋め込み」ボタンをクリックします。
  1. YouTube 動画がエディター内に表示されます。
  1. プレビュー」をクリックすると、ページのフロントエンドでも表示されます。

トップ ↑

他の YouTube リンクを埋め込む 他の YouTube リンクを埋め込む

プレイリスト プレイリスト

プレイリストのURLを埋め込むと、そのリストの最初の動画が埋め込みボックスに表示され、右上にはプレイリストのナビゲーションが追加されます。

すべての YouTube リンクが埋め込みに使用できるわけではありません。埋め込みに適していない URL が使われている場合、ブロックエディターには、別の URL を試す、または現在の URL をテキストリンクに変換する、という2つの選択肢があります。

トップ ↑

ブロックツールバー ブロックツールバー

左側の「移動ツール」と「ドラッグ & ドロップハンドル」の他に、YouTube 埋め込み用のブロックツールバーには4つのボタンが表示されています。

  • 変換
  • 配置変更
  • URL 編集
  • 追加オプション

トップ ↑

変換 変換

YouTube 埋め込みブロックをグループに変換することができます。これにより、YouTube の埋め込み部分の背景色を変更することができます。

トップ ↑

配置変更 配置変更

  • 左寄せ – YouTube 動画を左寄せにします。
  • 中央揃え – YouTube 動画を中央揃えにします
  • 右寄せ – YouTube 動画を右寄せにします。
  • 幅広 – コンテンツサイズを超えて投稿の幅を広くします。
  • 全幅 – YouTube 動画を画面の幅いっぱいに広げます。

「幅広」と「全幅」配置は、使用中のテーマで有効化されている必要があります。

トップ ↑

URL を編集 URL を編集

「URL を編集」から、YouTube 埋め込み URL を変更することができます。既存の URL を上書きした後、右の「埋め込み」ボタンをクリックしてください。

トップ ↑

追加オプション 追加オプション

通常の追加オプションが含まれます。

トップ ↑

ブロック設定 ブロック設定

YouTube 埋め込みでは、「詳細設定」の他に、「ブロック設定」のサイドバーに「メディア設定」という設定が1つだけあります。

トップ ↑

メディア設定 メディア設定

メディア設定では、スマートフォンの画面のような小さな端末から見たときの記事の埋め込みの動作を制御することができます。

切り替えスイッチは、小さい端末用のリサイズ機能のオン/オフを切り替えます。デフォルトでは「オン」、つまり青になっています。

オフ: この埋め込みは、ブラウザーがリサイズされたときにアスペクト比を維持できないことがあります。オフの場合、切り替えスイッチはグレーになります。

オン: この埋め込みは、ブラウザーのサイズが変更されてもアスペクト比を維持します。切り替えスイッチはオンにすると青くなります。

高度な設定

「高度な設定」ではブロックに CSS クラスを追加することができ、カスタム CSS を記述してブロックを自由にスタイリングすることができます。

YouTube 埋め込みでは、デフォルトの CSS クラスが用意されており、スマートフォンなどの小さな端末で見たときに、埋め込みがレスポンシブに処理されるようになっています。

Changelog

  • Updated 2020-08-18
    • Replaced “More Options” – new screenshot
    • Added “Move To” and “Copy” section under More Options
  • Updated 2020-05-26
    • Fixed some typos
  • Created 2020-04-21

この記事は役に立ちましたか ? どうすればさらに改善できますか ?