Embed video to Slideshow - Brooklyn Theme

Solved
Lukas_H
Tourist
8 0 0

Hey there! I hope you can help me with my issue.

Currently I am using the Brooklyn theme and have a slideshow with images on the homepage, but I would like to show a video with autoplay, muted sound, header, button etc. (like a revolution slider). Unfortunately I don't have enough experience in coding to implement this feature myself. So, my question is if there is any solution to this issue? In best case it should be responsive (also for mobile devices) and with the use of a uploaded video in Shopify (not Vimeo or YouTube; but this is not especially necessary). 

I hope you could help me out! If necessary I can send you the link to my website and the password, but per private message.

Greetings,

Lukas

0 Likes
Guleria
Shopify Partner
1451 298 412

Hello Lukas,

Please follow this post.
If you want to check it in live store drop me a message and I'll share the URL.

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Lukas_H
Tourist
8 0 0

Thanks for the fast answer @Guleria !

I have followed the post and have got it to work on desktop. So far so good, but I also have the problem (as mentioned in the post) that on mobile devices there is this blank space underneath. It seems like there something wrong with the sizing of the video, but I couldn't figure out what.

0 Likes
Guleria
Shopify Partner
1451 298 412

This is an accepted solution.

Do some css a/to your need.
btw you can try this one

.myVideo {
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    height: 100%;
    object-fit: cover;
}

 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Lukas_H
Tourist
8 0 0

Thanks for the help! The final code which I use for the theme.scss.liquid is

/**HP VIDEO STYLE**/
.myVideo {width: 100%; height: 100%; object-fit: cover; min-height: 100%; min-width: 100%;}
0 Likes