「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマFAMOUS:トップページのヘッダーコンテンツの動画の高さを変更する方法

Q.質問内容

・Youtube動画をスマホでも横幅いっぱい表示したい場合はどのように対応すればよいでしょうか?
・MP4動画の表示面の縦幅を調整したいです。
・メインの動画の高さが高すぎるので、調整したいです。

▼変更箇所イメージ

<変更後のイメージ※スマホ時>
変更箇所イメージ

A.下記の方法でカスタマイズしてください。

補足FAMOUSは画面の高さによって動画サイズが変わる仕様です。
今回のご案内は、画面の高さを固定にするご案内となります。
MP4動画、Youtubeともに、同様のカスタマイズで対応可能です。

管理画面【TCDテーマ】>【基本設定】>「カスタムCSS」に下記CSSをご入力ください。
高さはお好みで調整してください。

.p-index-video.is-mobile {
    height: 300px;
}

PCの高さを低くしたい場合

<変更後のイメージ※PC時>

管理画面【TCDテーマ】>【基本設定】>「カスタムCSS」に下記CSSをご入力ください。

.p-index-video:not(.is-mobile) {
    padding-top: 25%;
}

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

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

同じテーマのカスタマイズ記事