コンテンツにスキップ

本文にYouTube動画を埋め込む方法

旧マニュアル番号: No.28

商品紹介、サービスの解説、イベントのダイジェストなど、動画コンテンツは文章や画像だけでは伝えきれない多くの情報を伝えることができます。リッチテキストエディターを使えば、YouTubeなどにアップロードされた動画を、専門知識なしで簡単に記事内に埋め込むことができます。


1. 埋め込みたい動画のURLを準備する

まず最初に、記事に埋め込みたい動画の「URL」をコピーしておく必要があります。ここでは最も一般的なYouTubeを例に解説します。

  1. YouTubeで動画を開く: ブラウザでYouTubeにアクセスし、埋め込みたい動画の再生ページを開きます。

  2. 「共有」ボタンをクリック: 動画プレーヤーの下にある「共有」ボタンをクリックします。

  3. URLをコピー: 表示された共有ウィンドウにある「コピー」ボタンをクリックします。これで、この動画のURL(例: https://youtu.be/xxxxxxxx)がクリップボードにコピーされます。

2. 動画を埋め込む手順

  1. 動画を挿入したい行にカーソルを置く: リッチテキストフィールド内で、動画を挿入したい場所(通常は新しい空の行)をクリックしてカーソルを置きます。

  2. フローティングメニューの「+」アイコンをクリック: 行の左側、または表示されるフローティングメニューの「+」アイコンをクリックします。

  3. 「Video」アイコンを選択: 表示されるメディア挿入オプションの中から、「Video」(再生ボタンのアイコン)を選択します。

  4. URL入力欄が表示される: クリックすると、動画のURLを貼り付けるための入力欄がリッチテキスト内に表示されます。

  5. コピーしたURLを貼り付け: 入力欄の上で右クリックして「貼り付け」を選択するか、Ctrl+V (Macなら Cmd+V) を押して、先ほどYouTubeでコピーしたURLを貼り付けます。

  6. 自動で動画が埋め込まれる: URLを貼り付けると、Webflowが自動的にそのURLを認識し、リッチテキスト内に動画プレーヤーが埋め込まれます。

3. 対応している動画サービス

この方法では、YouTube以外にも、Vimeoなど、多くの主要な動画共有サービスのURLを認識して埋め込むことができます。

4. 注意点

  • 著作権: 埋め込む動画は、ご自身が権利を持っているか、埋め込みが許可されているものに限ります。他人の動画を無断で埋め込むことは、著作権侵害にあたる可能性がありますので十分ご注意ください。
  • レスポンシブ対応: この方法で埋め込んだ動画は、パソコン、タブレット、スマートフォンなど、閲覧するデバイスの画面サイズに合わせて、自動的に最適なサイズで表示されるように設計されています。

次のステップ: 動画でコンテンツがリッチになりましたね。次は、リッチテキスト内での最後の基本操作、「No.29 本文の文章にリンクを貼る方法」です。