会員サイトの記事に動画を埋め込む場合、次の2つの方法があります。
1)コードエディタを使用して埋め込みを行う方法
2)ビジュアルエディタを使用して埋め込みを行う方法
それぞれの手順は下記の通りです。
目次
1)コードエディタを使用して埋め込みを行う方法
・動画の埋め込みコードから動画の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>
YouTubeの埋め込みコードのサンプル
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>
Vimeoの埋め込みコードのサンプル
・動画の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が埋め込まれているかチェックし、確認が取れたらこれで動画の埋め込み完了です。
注意事項
YouTubeにつきましては、
商用利用不可の利用規約がありますので、事前に利用範囲をご確認頂くか、
ご自身で判断できない場合は法律の専門家へご相談ください。
商用利用不可の利用規約がありますので、事前に利用範囲をご確認頂くか、
ご自身で判断できない場合は法律の専門家へご相談ください。
この記事は役に立ちましたか?
ご回答いただきありがとうございます!
ページURL: https://docs.myasp.jp/?p=1264