Embed video to Slideshow - Brooklyn Theme

Store Design

AI-generated summary

Goal: add an autoplay, muted video (with header/button) to the Brooklyn theme’s homepage slideshow, ideally responsive and using a Shopify-uploaded video (YouTube/Vimeo not required).

Progress: after following an external guide, the video works on desktop. On mobile, a blank space appears below the video, indicating a sizing issue.

Technical details: CSS was suggested to make the video fill its container using object-fit: cover and full width/height.

  • Proposed CSS: .myVideo { right: 0; bottom: 0; min-width: 100%; min-height: 100%; height: 100%; object-fit: cover; }
  • Final CSS used (in theme.scss.liquid): .myVideo { width: 100%; height: 100%; object-fit: cover; min-height: 100%; min-width: 100%; }

Key term: object-fit: cover makes the video scale and crop to fill the container without distortion.

Open issues: it’s not confirmed if the mobile blank space is fully resolved. Another participant asks where to enter the code, and the instruction link is broken.

Outcome: partial implementation achieved; guidance needed on exact placement and mobile fix; discussion remains open. Code snippets are central to understanding.

1

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

2

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

3

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.

4

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;
}
5

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%;}
6

Hey, where do I enter this code? The link to the post with instructions doesn’t work :confused: