I. はじめに
募集ページ、招待ページ、記事には、外部の動画共有サービスにアップロードされた動画を埋め込むことができます。
YouTubeの動画を例に埋め込み方法をご案内します。
※YouTube以外の動画につきましては、それぞれのサイトのサポートページをご参照ください。
II. YouTube動画の埋め込み方法
Refcomeの募集または記事の編集画面を開きます。
以下のHTMLタグをコピーします。
文章入力欄内の動画を挿入したい個所にカーソルを置きます。
2でコピーしたHTMLタグをペーストします。
★の部分を、挿入したいYouTube動画のID(
https://www.youtube.com/watch?v=xxxx
またはhttps://youtu.be/xxxx
から始まるURLのxxxx
)に書き換えます。
HTMLタグ
<div style="position: relative; padding: 0 0 56.25%; height: 0;"><iframe src="https://www.youtube.com/embed/★" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="position: absolute; top: 0; height: 0; width: 100%; height: 100%"></iframe></div>
埋め込んだ動画が枠内に上手く収まらない場合
動画の縦横比に合わせた設定が必要となります。
HTMLタグの56.25%
の部分を、以下の数値に書き換えてください。
動画の縦横比 | HTMLタグの数値 |
16:9(標準的なスクリーンサイズ) |
|
4:3(ブラウン管テレビと同じサイズ) |
|
1:1(正方形/スクエア) |
|
9:16(スマートフォンを縦にして撮影) |
|