Sponsor

YouTube ショート動画を縦長で表示する方法/サイズを合わせる方法

YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP WP CSS
YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP
Sponsor

YouTube ショート動画

YouTubeのショート動画を埋め込むには2つの方法があります。

  • 埋め込みブロックで埋め込む
  • カスタムhtmlで埋め込む

YouTube ショート動画をそのまま埋め込むと次のように表示されます。

YouTubeの埋め込みブロックで表示した場合

「共有」のリンクをコピーして、埋め込みブロックに貼った場合

コード

https://youtube.com/shorts/1V8wB8Pw7Pw?si=CS37zjrHRMUJA1zT
si=パラメーターが既に指定されている

動画を右クリックして「動画のURLをコピー」で埋め込みブロックに貼った場合

コード

https://www.youtube.com/shorts/1V8wB8Pw7Pw?feature=share
feature=shareオススメ動画など表示される

動画を右クリックして「埋め込みコードをコピー」でカスタムhtmlブロックに貼った場合

YouTube ショート動画が横長 16:9 で表示される

YouTube のショート動画のURLやコードを貼ると、いずれも横長16:9で表示される場合があります。

YouTube ショート動画を縦長 9:16 で表示させる方法

次の手順で埋め込みます。

  1. 動画を右クリックする
  2. 「埋め込みコードをコピー」をクリック
  3. 投稿編集でブロックから「カスタムhtml」を選択
  4. 「カスタムhtml」に「埋め込みコード」を貼る
  5. コードを<div class="youtube"></div>で囲む
  6. テーマファイルエディッタで縦横比を9:16に指示する

動画を右クリックする

YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP
YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP

投稿編集でブロックから「カスタムhtml」を選択

YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP
YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP

「カスタムhtml」ブロックに「埋め込みコード」を貼る

YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP
YouTubeを埋め込む実際/自動再生とリピート再生とミュート WP

<div class="youtube"></div>で囲む

<div class="youtube">
</div>

<div class=”youtube”>~</div>で囲むと次のようになります。

<div class="youtube"><iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

テーマファイルエディッタで縦横比を指定する

ショート動画の縦横比が 9:16 になるように指定します。

  • テーマファイルエディッタで指定する
  1. 「外観」→「テーマファイルエディッタ」を開く
  2. スタイルシート (style.css)に下の記述を追加する
/*ショート動画を縦型に*/
.youtube iframe {
  position: relative;
  aspect-ratio:9 /16; /
}

.youtube .video {
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
  width: 300px;   /* ビデオ横幅 */
}

コードの説明

aspect-ratio:9 /16アスペクト比(ビデオの横/縦比)
margin: 0 auto横方向は中央になるようにautoとする
overflow: visible動画が枠よりオーバーした時は枠からはみ出す
overflow: hidden動画が枠よりオーバーした時は枠に合わせてカットされる
overflow: scrollスクロールバーが常に表示され、枠に合わせてカットされ表示される