マイスピーの会員サイトの記事にYouTubeやVimeoの動画を埋め込むにはどうしたらよいでしょうか？

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

１）コードエディタを使用して埋め込みを行う方法
２）ビジュアルエディタを使用して埋め込みを行う方法

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

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

・動画の埋め込みコードから動画のIDを取得する

YouTubeの場合

埋め込みたい動画下にある、
「共有」　＞　「埋め込みコード」をクリックしコピーします。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/(YouTube動画のID)” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Vimeoの場合

埋め込みたい動画にある「SHARE」をクリックし、
「Embed」のコードをコピーします。

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

・動画の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>

<div class=”video-container”>
<div>
<iframe src=”https://player.vimeo.com/video/(VimeoのファイルID)?rel=0″ frameborder=”0″ allowfullscreen></iframe>
</div>
</div>

・動画を埋め込む

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

・確認する

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

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

・動画のURLを用意する

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

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

会員サイト記事作成・編集　＞　「ビジュアルエディタ」切替え後に表示される
「動画アイコン」を選択します。

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

・確認する

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

注意事項