# 動画を埋め込む方法について

**URL:** <https://community.shopify.com/t/topic/8976>\
**Category:** 技術的なQ＆A\
**Created:** [February 5, 2020, 5:08pm UTC](https://community.shopify.com/t/topic/8976 "2020-02-05T17:08:24Z")\
**Posts on this page:** 8\
**Page:** 1

## AI-generated summary

Shopifyで作成したサイトのトップページに動画を埋め込む方法が中心の相談です。結論として、テーマの「カスタマイズ」→「セクション追加」→「動画」から追加でき、必要に応じてテーマコードを編集してHTMLでYouTube動画を埋め込む方法もあると案内されました。

その後、背景動画として設定したYouTube動画を画面横幅いっぱいに表示したいが、左右に余白が出る点が追加で相談されました。これに対しては、テーマ標準設定だけでは難しく、CSS（見た目を調整するスタイル設定）の調整が必要な可能性が高いという回答でした。

関連して、CSS学習用の参考動画が紹介され、ヘッダーに動画をデフォルトで設定できるテーマについては明確な情報は出ませんでした。必要なら既存テーマに自分でカスタマイズを加える方向が示されています。

最終的に、質問者は完全な手順までは示されていないものの、希望する形にかなり近づけたとして感謝を述べており、議論は概ね解決しています。

<div class="post-metadata">

**Author:** ![Rei88](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@Rei88](https://community.shopify.com/u/Rei88)\
**Post date:** [February 5, 2020, 5:08pm UTC](https://community.shopify.com/t/topic/8976/1 "2020-02-05T17:08:24Z")

</div>

Shopifyで作ったサイトのトップページに動画を埋め込みたいと思っています。

特定のテーマや特定のアプリを使用することで、動画を埋め込むことが可能になるのでしょうか？

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [February 10, 2020, 11:55pm UTC](https://community.shopify.com/t/topic/8976/2 "2020-02-10T23:55:14Z")

</div>

商品動画としてではなく、デザインとして言うことであれば、テーマのカスタマイズ＞セクションの追加＞動画 から動画を追加できます。

または、テーマのコードの編集から、直接HTMLを編集して例えば、Youtubeなどの動画を埋め込むことも可能です。

---

<div class="post-metadata">

**Author:** ![Rei88](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@Rei88](https://community.shopify.com/u/Rei88)\
**Post date:** [February 12, 2020, 3:21pm UTC](https://community.shopify.com/t/topic/8976/3 "2020-02-12T15:21:17Z")

</div>

ご回答ありがとうございます。

セクションの追加から、動画を追加する事ができました。

現在、背景ビデオとして、You Tubeにアップしている動画を設定しています。

横幅を画面一杯に表示したいのですが、左右に余白が出来てしまいます。

動画を横幅いっぱいに表示するには、どのような設定が必要なのでしょうか？

---

<div class="post-metadata">

**Author:** ![Rei88](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@Rei88](https://community.shopify.com/u/Rei88)\
**Post date:** [February 12, 2020, 3:23pm UTC](https://community.shopify.com/t/topic/8976/4 "2020-02-12T15:23:12Z")

</div>

ご回答ありがとうございます！

セクションの追加から、動画を追加する事ができました。

現在、背景ビデオとして、You Tubeにアップしている動画を設定しています。

横幅を画面一杯に表示したいのですが、左右に余白が出来てしまいます。

動画を横幅いっぱいに表示するには、どのような設定が必要なのでしょうか？

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [February 13, 2020, 5:59am UTC](https://community.shopify.com/t/topic/8976/5 "2020-02-13T05:59:45Z")

</div>

その場合、CSSを触らないと調整できないかもしれません。

---

<div class="post-metadata">

**Author:** ![Rei88](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@Rei88](https://community.shopify.com/u/Rei88)\
**Post date:** [February 16, 2020, 1:37pm UTC](https://community.shopify.com/t/topic/8976/6 "2020-02-16T13:37:43Z")

</div>

ご回答ありがとうございます。

ShopifyのCSSの記述に関して、詳細情報が載っているサイトなどはありますか？

また、デフォルトでヘッダーに動画を設定できるようなテーマはありますか？

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [February 17, 2020, 5:59am UTC](https://community.shopify.com/t/topic/8976/7 "2020-02-17T05:59:12Z")

</div>

CSSについては以下の動画などいかがでしょうか？  
[https://www.youtube.com/watch?v=Tt-Wy-ZDwas](https://www.youtube.com/watch?v=Tt-Wy-ZDwas)

> また、デフォルトでヘッダーに動画を設定できるようなテーマはありますか？

こちらは把握してませんが、もしCSSをいじるような HTMLコーディングをされるのであれば、ご自身でカスタマイズされた方が良いかもしれません。

---

<div class="post-metadata">

**Author:** ![Rei88](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@Rei88](https://community.shopify.com/u/Rei88)\
**Post date:** [February 21, 2020, 11:14am UTC](https://community.shopify.com/t/topic/8976/8 "2020-02-21T11:14:53Z")

</div>

なかなか難しいですが、何とか希望している形になってきました！

ご回答ありがとうございました。
