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

**URL:** <https://community.shopify.com/t/debut/36819>\
**Category:** 技術的なQ＆A\
**Created:** [February 20, 2021, 9:04pm UTC](https://community.shopify.com/t/debut/36819 "2021-02-20T21:04:16Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

DebutテーマのTOP動画セクションで、画像はブラウザ幅いっぱいに表示される一方、動画だけ幅が狭くなる問題が相談された。最初に `.wrapper` へ `width: 100%` などを追加しても改善しなかった。

回答では、動画セクション内の `.page-width` が幅を制限している可能性があるとして、対象セクションID配下に対して `padding-left: 0; padding-right: 0; max-width: none;` を指定するCSSが提案された。`page-width` はテーマ内でコンテンツ幅を制限するための要素を指す。

相談者は `theme.css` から `custom.css` を読み込み、そのCSSを追加したが、環境ではまだ全幅表示にならなかった。一方、回答者のDebut初期状態の検証では同じ設定で全幅表示を再現できたため、個別環境で別の要素が幅を制限している可能性が示された。

最終的に、動画は「カスタマイズ > セクションを追加 > 動画」の標準セクションであることが確認されたが、根本原因の特定までは至らず、開発者ツールで制限要素を調べる必要がある状態のまま継続中。

<div class="post-metadata">

**Author:** ![shinma](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@shinma](https://community.shopify.com/u/shinma)\
**Post date:** [February 20, 2021, 9:04pm UTC](https://community.shopify.com/t/debut/36819/1 "2021-02-20T21:04:16Z")

</div>

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

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

（画像の場合はブラウザの幅と同じ）

 ![image.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/9/9/f997d25e83e7a1f520b7cb9e4b86bc7cb03b88e2.jpeg)

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

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

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

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

 ![shinma_1-1613599076147.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/1/c15aa3815e46ae15fd500bfb93ed0bc52474b8f7.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 21, 2021, 8:55am UTC](https://community.shopify.com/t/debut/36819/2 "2021-02-21T08:55:51Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![shinma](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@shinma](https://community.shopify.com/u/shinma)\
**Post date:** [February 22, 2021, 9:33pm UTC](https://community.shopify.com/t/debut/36819/3 "2021-02-22T21:33:12Z")

</div>

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;\> }

としているのですが、

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 22, 2021, 10:35pm UTC](https://community.shopify.com/t/debut/36819/4 "2021-02-22T22:35:25Z")

</div>

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

 ![スクリーンショット 2021-02-23 7.25.52.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/1/81fe9e23d820060f766af364220c7fd78906dd5f.jpeg)

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

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

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

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

---

<div class="post-metadata">

**Author:** ![shinma](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@shinma](https://community.shopify.com/u/shinma)\
**Post date:** [February 23, 2021, 12:49am UTC](https://community.shopify.com/t/debut/36819/5 "2021-02-23T00:49:39Z")

</div>

jizo様

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

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

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

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

---

<div class="post-metadata">

**Author:** ![shinma](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@shinma](https://community.shopify.com/u/shinma)\
**Post date:** [February 23, 2021, 9:40pm UTC](https://community.shopify.com/t/debut/36819/6 "2021-02-23T21:40:01Z")

</div>

jizo様

度々失礼いたします。

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [February 24, 2021, 12:12am UTC](https://community.shopify.com/t/debut/36819/7 "2021-02-24T00:12:45Z")

</div>

![スクリーンショット 2021-02-24 8.50.25.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/c/5c040891a5372c76f6b28116a4752d5b73a37269.png)

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

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