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

会員サイトで、動画を閲覧できるようにするための手順は下記の通りです。

操作手順

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

YouTubeの場合

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

1264_20210409_02

<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」のコードをコピーします。

1264_20210409_01

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

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

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

1で取得した動画の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を埋込むためのサンプルコード

3.動画を埋込む

2で作成した動画を埋め込むためのコードを会員サイトおよび会員サイト記事の編集画面から貼り付けます。
1264_20210409_03

4.確認する

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

注意! 

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

サブコンテンツ

このページの先頭へ