How can I decrease and center a video size on a webpage?

Technical Q&A
1

Hello,

There is a video on the page I have listed below that I can’t seem to figure out how to “Center” it or “Decrease” the actual size of the video. It’s huge when you click onto that specific page and I would like for it to be viewed as a smaller, more appropriate size.

I have tried to look into the HTML but can’t seem to figure out exactly where the size is.

If someone could assist me, I would appreciate it.

Thank you ahead of time!

https://shoptheparfumerie.com/collections/specialty-bottles-1

Kind regards,

Tammi

1 Like
2

@TheParfumerie ,

Long story short, the video is within an iframe, so thorough customization is impossible. The best that can be done is:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
iframe.instagram-media{
    max-width: 300px !important;
    width: 100%;
    margin: 0 auto !important;
    margin-bottom: 40px !important;
}

300px = video width
40px = bottom margin

diego_ezfy_0-1658190064850.png
diego_ezfy_0-1658190064850.png1415×903 161 KB

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

3

Hi @TheParfumerie ,

Try this code instead.

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the theme.scss file.
  3. Add the code below.

NOTE: Adjust the 200px to the size you want.

iframe#instagram-embed-0 {
    margin: 0 auto 20px !important;
    max-width: 200px !important;
}