動画の幅を広げる方法【Debut】

利用しているテーマ【Debut】で、

動画の幅がブラウザの幅よりも狭くなっています。

(画像の場合はブラウザの幅と同じ)

動画の幅を広げたいのですが、

他のトピックを参考にして、

下記のCSSを追加しましたが、動画の幅は広くなっていません。

#shopify-section-16130811791aaff9c7 .wrapper {
width: 100%; max-width: 100%; padding: 0; }

動画の幅を広げる方法をご教授いただけますと幸いです。

動画の場所と参考にされたトピックが不明なのであっているかわかりませんが、ホームページの動画セクション(テーマのカスタマイズで追加できる箇所)のことでしたら以下の指定で実現できるのではと思われます。
※ID部分はご質問に記載されているそのままをペーストしています

#shopify-section-16130811791aaff9c7 .page-width{
 padding-left:0;
 padding-right:0;
 max-width:none;
}

見当違いでしたら申し訳ありません。

1 Like

jizo様

ありがとうございます。

はい、動画は動画セクションで追加したTOP動画です。

最初の投稿では上にも画像があるように見えますが、

TOP動画にしたいです。

参考にしたページは英語でvideo widthなどと検索したのですが、ブックマークなどしていなかったので今ぱっと見つかりません…

theme.css

@import “custom.css”

custom.css

#shopify-section-16130811791aaff9c7 .page-width{> padding-left:0;> padding-right:0;> max-width:none;> }

としているのですが、

動画の幅はブラウザより短くなっています。

確認いただきありがとうございます。

こちらで初期状態のDebutを用いて試した際には、上記画像のように全幅で表示されていましたので、残念ながらこれ以上はお役に立てないように思います。

なお現状お伝えできるアドバイスとしては以下になります。

  • ブラウザの開発者ツールを使って幅制限をしている要素を見つけ、そこを変更できるようなCSSを書く

お役に立てず申し訳ありません。

1 Like

jizo様

アドバイスありがとうございます。

こちらでも初期状態では全幅になっておりましたが、

どの要素が制限しているのか、

もう一度最初から試して確認してみます。

jizo様

度々失礼いたします。

jizo様に画像で提示していただいた状態を再現できませんので、

手順を詳しく教えていただけますと幸いです。

もう一度、テーマを探すからDebutをダウンロードしました。

カスタマイズ>セクションを追加する のところで「動画」を選択されたのでしょうか。

上記画像の赤枠となりますので、書かれている場所と同じかと思います。

あとは最初の記載しました記述をtheme.cssに追加しています。

1 Like