YouTubeのショート動画を埋め込むには2つの方法があります。
YouTube ショート動画をそのまま埋め込むと次のように表示されます。
コード
https://youtube.com/shorts/1V8wB8Pw7Pw?si=CS37zjrHRMUJA1zT
si= | パラメーターが既に指定されている |
コード
https://www.youtube.com/shorts/1V8wB8Pw7Pw?feature=share
feature=share | オススメ動画など表示される |
YouTube のショート動画のURLやコードを貼ると、いずれも横長16:9で表示される場合があります。
次の手順で埋め込みます。
<div class="youtube">
~</div>
で囲む動画を右クリックする
投稿編集でブロックから「カスタムhtml」を選択
「カスタムhtml」ブロックに「埋め込みコード」を貼る
<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 になるように指定します。
/*ショート動画を縦型に*/.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 | スクロールバーが常に表示され、枠に合わせてカットされ表示される |