会員サイトの記事に動画を埋め込む場合、次の2つの方法があります。

1)コードエディタを使用して埋め込みを行う方法
2)ビジュアルエディタを使用して埋め込みを行う方法
3)ブロックエディタを使用して埋め込みを行う方法

それぞれの手順は下記の通りです。

1)コードエディタを使用して埋め込みを行う方法

・動画IDを取得する

「動画ID」の取得方法については、「動画IDを取得する方法」をご覧ください。

・動画IDを含んだ動画を埋め込むためのコードを作成する

下記サンプルコードを参考に、取得した「動画ID」を記載します。

<div class="video-container">
<div>
<iframe src="https://www.youtube.com/embed/(YouTubeの動画ID)?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

会員サイトにYouTubeを埋め込むためのサンプルコード

<div class="video-container">
<div>
<iframe src="https://player.vimeo.com/video/(Vimeoの動画ID)?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

会員サイトにVimeoを埋め込むためのサンプルコード

・動画を埋め込む

会員サイト記事作成・編集画面に、動画を埋め込むためのコード貼り付けて保存します。

・確認する

会員サイトにログインして、該当記事にYouTubeやVimeoが埋め込まれているかチェックし、確認が取れたら動画の埋め込み完了です。

2)ビジュアルエディタを使用して埋め込みを行う方法

・動画のURLを用意する

YouTubeやVimeoの埋め込みしたい動画のURLを用意します。

・動画のURLを貼り付けする

「ビジュアルエディタ」に切り替え、「動画アイコン」を選択します。

用意した動画のURLを貼り付け後、「動画挿入」を押し保存します。

・確認する

会員サイトにログインして、該当記事にYouTubeやVimeoが埋め込まれているかチェックし、確認が取れたらこれで動画の埋め込み完了です。

3)ブロックエディタを使用して埋め込みを行う方法

・動画IDを取得する

「動画ID」の取得方法については、「動画IDを取得する方法」をご覧ください。

・「動画」ブロックを挿入する

ブロックエディタの左メニューから「動画」ブロックをドラッグ&ドロップして挿入します。

・「種類」を選択する

画面右側の「スタイル」にて、動画の「種類」を選択します。

・動画IDを入力する

画面右側の「スタイル」にて、「動画ID」欄に、取得した動画IDを入力します。

・確認する

会員サイトにログインして、該当記事にYouTubeやVimeoが埋め込まれているかチェックし、確認が取れたら動画の埋め込み完了です。

動画IDを取得する方法

YouTubeの場合

埋め込みたい動画下にある、「共有」をクリックして共有画面を開き、「埋め込む」をクリックします。

動画の埋め込みコードが表示されたら、動画IDをコピーします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/(YouTubeの動画ID)?si=XXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

YouTubeの埋め込みコードのサンプル

Vimeoの場合

埋め込みたい動画にある「(Share)」ボタンをクリックします。

「Embed」タブを開き、動画IDをコピーします。

<iframe src="https://player.vimeo.com/video/(Vimeoの動画ID)" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Vimeoの埋め込みコードのサンプル

注意事項

YouTubeにつきましては、商用利用不可の利用規約がありますので、事前に利用範囲をご確認いただくか、ご自身で判断できない場合は法律の専門家へご相談ください。

この記事は役に立ちましたか?

役に立った
役に立たなかった
ご回答いただきありがとうございます!