会員サイト記事に動画を埋め込みたいのですが、どうすればいようですか？
会員サイト記事に動画を埋め込む場合、以下の方法があります。
- MyASP上にアップロードした動画を埋め込む方法
- 外部サイトにアップロードした動画を埋め込む方法
本マニュアルでは、それぞれの設定方法について説明します。
目次
MyASP上にアップロードした動画を埋め込む方法
MyASP上にアップロードした動画は、「コードエディタ」または「ブロックエディタ」にて会員サイト記事に埋め込むことができます。
動画のアップロード
MyASPトップ画面 ＞ メディアライブラリ（β版）
にて「+メディアファイルを追加」をクリックし、「ファイルを選択」から動画ファイルを選択、または動画ファイルをドラッグ&ドロップをすることで、MyASP上に動画をアップロードすることができます。
ブロックエディタを利用する場合は、ブロックエディタ編集画面から直接動画をアップロードすることもできます。
ファイルアップロード方法の詳細は下記マニュアルを参考にしてください。
参考：機能解説：メディアライブラリ
会員サイト記事への動画の埋め込み
コードエディタの場合
１． MyASPトップ画面 ＞ メディアライブラリ（β版）
にて「動画のアップロード方法」の項を参考に、会員サイト記事に埋め込む動画を事前にアップロードします。
２．埋め込みたい動画をクリックして「メディア詳細」画面を開き、「埋め込みタグ」の「」アイコンをクリックして埋め込み用のコードを取得します。
３．会員サイト記事作成・編集画面の「コードエディタ」にて、本文欄に（２）で取得したコードを貼り付けます。
各項目の設定が完了したら、ページ下部の「保存する」ボタンをクリックして設定内容を保存します。
４．会員サイトにログインし、該当会員サイト記事にメディアライブラリにアップロードした動画が表示されていれば設定は完了です。
ブロックエディタの場合
ブロックエディタの使い方については、下記マニュアルを参考にしてください。
参考：機能解説：ブロックエディタ
１．会員サイト記事作成・編集画面の「ブロックエディタ（β版）」をクリックし、ブロックエディタの編集画面を表示します。
２．左メニューから、「動画（MyASP）」ブロックを本文入力欄にドラッグ&ドロップします。
３．メディアライブラリが表示されます。
事前に動画をアップロードしていない場合は、「+メディアファイルを追加」から埋め込みたい動画をアップロードします。
アップロードが完了すると、一覧にアップロードした動画が表示されます。
※事前に動画をアップロードしている場合は手順4へ進みます
４．一覧から埋め込みたい動画をクリックして選択します。
動画を選択すると、本文に挿入した動画ブロックに選択した動画が表示されます。
５．「編集終了」をクリックしてブロックエディタの編集を終了します。
表示された会員サイト記事作成・編集画面にて、各項目を設定しページ下部の「保存する」ボタンをクリックして設定内容を保存します。
６．会員サイトにログインし、該当会員サイト記事にメディアライブラリにアップロードした動画が表示されていれば設定は完了です。
外部サイトにアップロードした動画を埋め込む方法
外部サイトにアップロードした動画は、全てのエディタにて会員サイト記事に埋め込むことができます。
動画IDの取得
YoutubeやVimeoなど、外部サイトにアップロードした動画を埋め込みたい場合は、下記を参考に事前に動画IDを取得してください。
Youtubeの場合
１．埋め込みたい動画下にある、「共有」をクリックして共有画面を開き、「埋め込む」をクリックします。
２．動画の埋め込みコードが表示されたら、動画IDをコピーして取得します。
YouTubeの埋め込みコードのサンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/(YouTubeの動画ID)?si=XXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autVimeoの場合
１．埋め込みたい動画にある「（Share）」ボタンをクリックします。
２．「Embed」タブを開き、動画IDをコピーして取得します。
Vimeoの埋め込みコードのサンプル
<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の箇所を（１）で取得した「動画ID」に書き換え、動画埋め込みタグを作成します。
Youtubeを埋め込むためのサンプルコード
<div class="video-container">
<div>
<iframe src="https://www.youtube.com/embed/(YouTubeの動画ID)?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>Vimeoを埋め込むためのサンプルコード
<div class="video-container">
<div>
<iframe src="https://player.vimeo.com/video/(Vimeoの動画ID)?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>３．会員サイト記事作成・編集画面の「コードエディタ」にて、（２）で作成したコードを貼り付けます。
各項目の設定が完了したら、ページ下部の「保存する」ボタンをクリックして設定内容を保存します。
４．会員サイトにログインし、該当会員サイト記事にYouTubeやVimeo等の動画が表示されていれば設定は完了です。
ビジュアルエディタの場合
１．YouTubeやVimeo等にアップロードした動画のURLを取得します。
２．会員サイト記事作成・編集画面の「ビジュアルエディタ」にて、「（動画）」アイコンをクリックします。
３．「動画のURL」欄に（１）で取得した動画URLを入力し、「動画挿入」ボタンをクリックします。
４．本文に動画が表示されます。
各項目を設定し、ページ下部の「保存する」ボタンをクリックして設定内容を保存します。
５．会員サイトにログインし、該当会員サイト記事にYouTubeやVimeoの動画が表示されていれば設定は完了です。
ブロックエディタの場合
ブロックエディタの使い方については、下記マニュアルを参考にしてください。
参考：機能解説：ブロックエディタ
１．「動画IDを取得する方法」の項を参考に、会員サイト記事に埋め込む動画の動画IDを取得します。
２．会員サイト記事作成・編集画面の「ブロックエディタ（β版）」をクリックし、ブロックエディタの編集画面を表示します。
３．左メニューから、「動画（外部）」ブロックを本文入力欄にドラッグ&ドロップします。
４．右メニューの「スタイル」にて、埋め込みたい動画の「種類」を選択します。
５．「動画ID」欄に（１）で取得した動画IDを入力します。
動画ID欄を入力すると、本文に挿入した動画ブロックに該当IDの動画が表示されます。
６．「編集終了」をクリックしてブロックエディタの編集を終了します。
表示された会員サイト記事作成・編集画面にて、各項目を設定しページ下部の「保存する」ボタンをクリックして設定内容を保存します。
７．会員サイトにログインし、該当会員サイト記事にYouTubeやVimeoの動画が表示されていれば設定は完了です。
注意事項
YouTubeは商用利用不可の利用規約があります。
事前に利用範囲を確認するか、ご自身で判断できない場合は法律の専門家へ相談してください。