操作方法
操作方法
動画埋め込みの方法
2024/11/14
作成見たまま編集,カスタムコンテンツ
動画を埋め込む方法
■YouTubeの動画を埋め込む方法
STEP1．
埋め込みたいYouTube動画の画面下にある共通の項目を選択
STEP2．
埋め込むという項目を選択
STEP3．
赤枠で囲んでいるiframeのコードをコピーして、右下にあるコピーボタンを選択
STEP4．
サイト内に動画を埋め込みたい箇所を決める。
この説明では赤枠で囲われている箇所に埋め込もうと思います。
STEP5．
任意の場所を左ダブルクリックでブロック要素を選択。
編集画面では薄く赤い囲いでブロック要素が表示される
STEP6．
ブロック要素を選択したら、次に見たまま編集で追加を選択
STEP7．
さらにHTMLを選択してHTML追加の画面を表示
STEP8-1．
コードにYouTubeでコピーしたiframeのコードを、下記の形式にあてはめて貼り付ける
（Windowsならctrl v Macなら(command) Vでコピー）
<div style="width:100%;aspect-ratio: 16/9;">
<div style="width:100%;aspect-ratio: 16/9;">
<iframe src="https://www.youtube.com/embed/8D1ci9ztPI8" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
※ 具体的には、上記コードの<iframe></iframe>の箇所をYouTubeでコピーしたコードに差し替えた状態で、ページ内へ貼り付けをするという流れになります。
その際に、<iframe width="560" height="315"...> のwidth="560" height="315"の箇所は、削除していただきますようお願いいたします。
STEP8-2．
挿入位置を左から2番目の、要素ブロック内の下方に挿入するを選択。
STEP8-2.の画像で説明すると、緑枠の要素ブロック内に含まれた他の要素（画像やテキスト）
よりも下方赤枠部分に動画が挿入される。
■YouTubeの動画をカスタムコンテンツ（ブログやニュースなど）に埋め込む方法
STEP1．
カスタムコンテンツ記事内は、説明ではここに動画を埋め込みます
STEP2．
本文のタスクバー：一番右にあるコード入力を選択します。
STEP3．
黒い背景のコード画面では凄まじいほどのソースコードが並んでいてわかりずらいと思いますが、
埋め込みたい場所付近のタイトル、文章を探して、その要素の上下に貼り付けます。
ここでの説明画像では</div>の後ろにカーソルを合わせるか、Enterキーで十分なスペースを確保してから貼り付けるといいでしょう。
</div></p></span>など、主に</>が付いているコードの後ろに貼り付けることを心掛けてください。
＊画像だけはどうしても<img
src="/upload/tenant_12/6b8e9215aabcfd16f0a5359bcce2eb19.png">というようなソースコードになってしまいますので、
画像付近のタイトル、文章で判断するしかありません。
STEP4．
コードにYouTubeでコピーしたiframeのコードを、下記の形式にあてはめて貼り付ける
（Windowsならctrl v Macなら(command) Vでコピー）
<div style="width:100%;aspect-ratio: 16/9;">
<iframe src="https://www.youtube.com/embed/8D1ci9ztPI8"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
※
具体的には、上記コードの<iframe></iframe>の箇所をYouTubeでコピーしたコードに差し替えた状態で、ページ内へ貼り付けをするという流れになります。
その際に、<iframe width="560" height="315"...> のwidth="560" height="315"の箇所は、削除していただきますようお願いいたします。
その際に、<iframe width="560" height="315"...> のwidth="560" height="315"の箇所は、削除していただきますようお願いいたします。
STEP5．
動画のiframeコードを貼り付け終わったら、
コード入力を再度選択して本文内の画面を切り替え、
動画が埋め込まれていることを確認しましょう。
STEP6．
動画の埋め込みが完了できましたら、送信ボタンをお忘れなく。
赤線部分は動画サイズを表記しているもので、widthは横幅を表記しています。
100%の数値を変更することで、記事全体のバランスを考慮してサイズ調整をしてみることもできます。
