GAIA：常にトップページのヘッダースライダーのサイズを16:9で表示させる方法

Q.質問内容

・ヘッダースライダーのサイズを比率固定したいです。
・メイン動画に設定した動画を、PC、スマホ問わず16:9で表示させたいです。

▼変更後イメージ(デモサイト：スタイルアーカイブページ)

A.TCDテーマオプションの基本設定＞カスタムCSSに以下を追記してください。

下記のCSSを追記することで全画面表示を解消して、常にトップページのスライダーを16:9で表示させることができます。

#js-index-header{
   aspect-ratio: 16 / 9;
    width: 100%!important;
    height: auto!important;
}

※ヘッダースライダーのコンテンツ、ニュースティッカーが表示されている場合、スマホ時に表示が崩れる場合があります。
※16：9の値を変更することで、表示されている動画の比率を変更することができます。

2024.02.06

Q.スマホ表示の場合、設定した画像または動画が全画面表示になってしまい、切り取られて表示されます。 ▼左：画像（1740×840ピクセル）　右：動画（640×360ピクセル）の例 A.下記のCSSを追加することで全画面表示を解消して全体が表示できます。スマホとPCでは縦横比が...

この記事は役に立ちましたか？

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！