Youtubeのショート動画が増えてきましたね。TiktokやLINEのVOOM、Instagramのタイムライン動画など、流しながら次々と見られる動画がプロモーションやサービス訴求としても非常に有効です。ショート動画をWebページに埋め込みたいけど、普通の動画と違って共有ボタンに[埋め込みコード]を出力する手段がありません。ショート動画を埋め込みたい時はどうすればいいでしょうか？

HTMLとCSSの実装

埋込したいショート動画にアクセスし、動画の上で右クリックし[埋め込みコードをコピー]を選択します。次に埋め込みたいWebページの任意の位置に以下のようにコードを埋め込みます。

<div class="youtube_short"><iframe width="315" height="560" src="https://www.youtube.com/embed/動画ID" title="動画タイトル" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

CSSを設定する

レスポンシブ対応のため以下のようにCSSを実装します。スマホでは画面からはみ出ないよう、またPCでは横幅が大きくなりすぎて高さがはみ出ないような数値にします。

.youtube_short{
 width: 70%; /* 伸縮する横幅 */
 max-width: 400px; /* 最大の横幅 */
 margin: auto; /* 画面の中央に配置 */
}
.youtube_short iframe{
 aspect-ratio: 9 / 16;
 width: 100%;
 height: 100%;
}

表示例

おしまい♥

タグ：Youtube