💡

HTMLフリー入力モジュールを使うことで、Youtube YoutubeShortの動画をいれることが可能です。

自由度が高いため記載するHTMLの中身に関しては、貴社のご判断・ご責任のもとでご対応をお願いいたします。 ⚠️HTML入力時の禁止事項を必ずお読みください。

⚠️ 注意事項

不正なHTMLを入力するとページ全体が崩れる恐れがあり、記載されたHTMLの中身に関しては、当社では一切の責任を負いかねます。

詳しくはHTMLフリー入力モジュールの禁止事項 をよく読み慎重にご利用ください。

01. 『HTMLフリー入力』モジュールを選択する

モジュールとモジュールの『＋』ボタンから 『HTMLフリー入力』モジュールを選択してください

02. Youtubeタグを入力する

Youtubeから取得した動画のタグを入力してください

⚫︎Youtubeタグ取得方法

動画の『共有』ボタンから『埋め込む』を選択し、コピーしてください

詳しくはこちらのYoutube ヘルプをご確認ください

⚫︎Youtube Shortタグ取得方法

PCでショート動画を開き、動画の上で右クリックし

『埋め込みコードをコピー』ボタンをクリックして取得できます

03. 見え方を調整する

動画の上下左右のマージン等が指定されていない状態です。

下記の例を参考に、見え方を調整してください。

動画をページの中央に表示させる

<style>
/* ---------- 変数設定 START ---------- 
複数の動画を設置する場合は「youtube1」をユニークとしてください。
------------------------------------- */

.youtube1 {
   /* --- PCでの動画の横幅を設定 --- */
  --movie-width: 400px;

   /* --- モバイルでの動画の左右余白幅を設定 --- */
  --movie-sp-padding: 20px;

   /* --- 動画の縦横比を設定：タテ長「9 / 16」, ヨコ長「16 / 9」--- */
  --movie-aspect-ratio: 9 / 16;
}
/* ---------- 変数設定 END ---------- */

.youtube1 {
  margin: 0px auto !important;
  width: var(--movie-width) !important;
  aspect-ratio: var(--movie-aspect-ratio) !important;
}
.youtube1 iframe {
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 768px) {
  .youtube1 {
     width: calc(100% - (var(--movie-sp-padding) * 2)) !important;
     padding: 0 var(--movie-sp-padding) !important;
     box-sizing: content-box !important;
  }
}
</style>
<div class="youtube1">

<iframe width="367" height="652" 
src="XXXXXX" 
title="XXXXX" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen></iframe>

</div>

• グレーのテキストがYoutubeのタグとなります。ここを入れ替えてご利用ください。

• 変数設定START〜変数設定ENDまでの数字を変更して調整してください。