How to contain video within a frame on a Dawn Theme desktop version?

Store Design
1

Hi there

I wanted to embed a product video on my Home page, the video is uploaded on Wistia.

The Shopify Support suggested I’d use custom liquid.

So I have put the Wistia embed code in custom liquid and the video shows correctly.

However, on the desktop the video extends all the way from right to left of the screen, and it takes over the entire screen. On the mobile it’s fine, it doesnt’ look too bad.

Is there a way I can somehow ‘contain’ the video within a frame on the desktop version? Maybe leave some margins right and left, so that it doesn’t feel like a video banner of some sort?

I’m using the Dawn Theme and am not very techie :wink:

Thanks for all your help
Martina

2

Hi @Martina26

Could you share your url store & password? I will help to check the issue.

3

Hi @Martina26

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_0-1674802790535.png
EBOOST_0-1674802790535.png1623×433 51.1 KB

  1. Assets/base.css

  2. Add code below to bottom of file

@media only screen and (min-width: 749px) { 
	.wistia_responsive_padding {
		max-width: var(--page-width);
	    padding-left: 5rem!important;
	    margin: 0 auto;
	    padding-right: 5rem!important;

	}
}
1 Like
4

Thank you so much Eboost!

Your detailed step-by-step with screenshot was very helpful.

Now the video looks perfect. I really appreciate your help.

If I wanted to take this a step further and put a thin frame around the video, say light grey colour, would that be possible? I ask this because I’m using a white background on my site, and some of the images that appear on the video are white and kind of ‘merge’ with the background when the video is being played.
So I thought that maybe putting the video inside a frame (something thin, not too thick) would help when watching it.

Is this possible at all? And if it is, how do I go about it? :blush:
Thank you again.

5

Hi @Martina26

You can add code below to bottom of Assets/base.css file.

.wistia_responsive_padding .wistia_responsive_wrapper .wistia_embed > div {

 border: 1px solid grey;

}
1 Like
6

Thank you so much again. It looks even better with the border!

I appreciate your help :slightly_smiling_face: