Help! Background Video Full Width At All Times On Dawn

Breaward · ‎02-28-2024

Hi, I added my own code to get a shopify video background but the video isn't sized how I would like. this is how it looks, I don't want that gap in between the announcement I want something similar to this (2nd image)

as well as adding a button for volume/pause.

Dan-From-Ryviu · ‎02-28-2024

Hi @Breaward

Please add this code to your theme.liquid file after <head> in Online Store > Themes > Edit Code

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin: 0 !important;
border-radius: unset !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎02-28-2024

Hi @Breaward

Dan here from Ryviu: Product Reviews & QA.

Could you share your store URL to check?

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Breaward · ‎02-28-2024

https://14fb05-1b.myshopify.com/ password:breaward66

Dan-From-Ryviu · ‎02-28-2024

Hi @Breaward

Please add this code to your theme.liquid file after <head> in Online Store > Themes > Edit Code

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin: 0 !important;
border-radius: unset !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Breaward · ‎02-28-2024

Thank you, it worked if I wanted to keep my old announcement bar what would I change, also is there a way to add the volume and pause buttons please?

Dan-From-Ryviu · ‎02-28-2024

Update code

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin-top: 0 !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Breaward · ‎02-29-2024

Hi, when I press the cart icon the header changes to all white and my pages are gone.

Dan-From-Ryviu · ‎02-29-2024

Please update the code

<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin-top: 0 !important;
}
</style>
{% if template == 'index' %}
<style>
.videoBackground {
margin-top: -37px;
}
</style>
{% else %}
<style>
.videoBackground {
margin-top: -123px;
}
.header-wrapper {
background: transparent !important;
}
</style>
{% endif %}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Breaward · ‎02-29-2024

last thing can you give me the updated code with the original announcement like this:

also on klaviyo the left image doesn't appear on phone.

Breaward · ‎02-28-2024

also the link of what I want is: https://www.khy.com/

Help! Background Video Full Width At All Times On Dawn

Help! Background Video Full Width At All Times On Dawn

Community Blog Articles