Narrative Theme - Video Play button remove/hide

Highlighted
New Member
2 0 1

Hello, 

I'm trying to understand the Narrative Codes to hide or remove the play button on the video home page.

 

I can't send the website since is still with password from my customer. But I can attach a picture. The customer doesn't want to see the play button on the center. It can be removed or at the bottom left side.

 

shopify adonai button.PNG

 

 

0 Likes
Highlighted

Hello 

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

Hello 
Add this css at the bottom of

Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

button.btn.btn--clear.video-section__load-player-button {
    display: none;
}
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
1 Like
Highlighted
New Member
2 0 1

Thank you for your reply.

I went to

Online Store-> Themes -> Edit code -> Assets -> theme.scss.liquid 

and added the code you metione at the bottom

 

button.btn.btn--clear.video-section__load-player-button {    
display
: none; }

I save it and went to preview the button still there. Did I do something wrong?

1 Like
Highlighted
New Member
1 0 1

DONE!
If you navigate to /assets/theme.scss.css, just edit the following three opacity: values to zero...

 

.slideshow__play-button {
opacity: 0;

 

&:hover,
&:disabled {
opacity: 0;
}


.slideshow__video--loaded & {
opacity: 0;
}

Screen Shot 2020-04-12 at 2.12.18 PM.png

1 Like
Highlighted
New Member
1 0 0

...........

0 Likes
Highlighted
New Member
1 0 0

This solution works perfectly. With this setup, you can use an autoplaying, looping video in the slideshow as a hero video. Thanks!

0 Likes