Q.ヘッダーの動画が上下切れて表示される
トップページのヘッダーに設定した動画（1920×1080）が、上下が切れて縮小されたように表示されます。動画全体を表示させることはできますか？
A.はい、カスタムCSSで対応可能です
テーマのデザイン上、ヘッダー枠の縦横比と動画ファイルの縦横比が異なる場合、上下が切り取られる仕様になっています。カスタムCSSを追加することで、動画全体を表示させることができます。
管理画面のTCDテーマ ＞ 基本設定 ＞ カスタムCSSに、下記コードをコピペして保存してください。
/* トップページのヘッダー動画を16:9で全体表示 */
#js-mv1:has(video) {
height: auto;
background: #000;
}
#js-mv1:has(video) .p-mv1__track,
#js-mv1:has(video) .p-mv1__list {
height: auto;
aspect-ratio: 16 / 9;
}
#js-mv1:has(video) video.c-cover {
object-fit: contain;
}
動画の縦横比が16:9以外の場合は、aspect-ratioの数値をご利用の動画の縦横比に合わせて調整してください。
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！