Youtube video as Full background in Debut

Solved
Highlighted
Excursionist
23 0 1

Hi,

How can I use a youtube video link as Full responsive background video?

It currently is within a container.

https://wkstoredemo.myshopify.com

Any code that I can copy and paste? Please guide me where should I edits I am not a programmer.

 

Thank you. 

 

0 Likes
Highlighted

Hello WK,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#Video-1583919791295 {
    width: 100% !important;
    left: 0px !important;
}
#shopify-section-1583919791295 .page-width {
    padding-left: 0px! important;
    padding-right: 0px! important;
width:100%!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Staff
Shopify Staff
798 94 134

Hi, @iCWK,

Hank here from Shopify.

I see you have gotten some great help from @oscprofessional so be sure to advise if this has helped you!

If you do need further assistance with this, let me know and I can query this with our theme developers for you to see if this is possible as you are using a Shopify theme.

 

All the best, Hank

Hank | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
23 0 1

Hi,

 

I copy and paste to the path as followed

 

.selectors-form__item {
padding-bottom: $footer-spacing-small;
margin: 0 $footer-spacing-extra-small;

@include media-query($medium-up) {
padding-bottom: 0;

&:first-of-type {
margin-left: 0;
}
}
}

#Video-1583919791295 {
width: 100% !important;
left: 0px !important;
}
#shopify-section-1583919791295 .page-width {
padding-left: 0px! important;
padding-right: 0px! important;
width:100%!important;
}

 

It seems the same. May I ask, what is 1583919791295?

 

Thank you

0 Likes
Highlighted

This is an accepted solution.

Hello WK,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-1583919791295 .page-width {
   max-width: 100%!important;
}
#Video-1583919791295 {
    width: 100% !important;
}

 1583919791295 is the id of video section.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
23 0 1

Hi Oscprofessional,

 

It works with both codes together but is it possible to have the video after the menu line or covering to the top of the menu?

 

Thank you

WK


0 Likes
Highlighted
Excursionist
23 0 1

Hi,

Can it cover up to the line or to the top?

 

Thank you

 

0 Likes
Highlighted

This is an accepted solution.

Hello WK,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.main-content {
	padding-top: 0px !important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
6 0 1

Hi I reviewed your solution in this chat window but I'm not able to get the desired result and the background video is still reflecting in container. Also, can you please let me know why is it that video is not visible only sound is playing in the background. https://www.riderbagusa.com/

As I'm not a programmer, would be obliged to get help. Thanks

0 Likes
Highlighted
Tourist
6 0 1

It worked but video is visible after very long time can you suggest about speed optimisation as I think that is the problem.

0 Likes