Change width of embedded video

[Warby]

I am using the following:

<iframe width="50%" src="https://www.youtube.com/embed/5D_UFtCRKj0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This shows as expected in the admin but not when live ( The video is full width).

Cheers

Steve Warby

[Warby]

Anybody out there ??????

[May]

Hi, Warby!

This is May from Shopify.

It looks like the video will not change its width because of the way the theme was coded. In order to adjust the width of your video, you will need edit your theme code. Before making any changes to your code, I highly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results. Once you have made a duplicate, feel free to follow the steps below.

1. From your admin, go to ‘Online Store > Actions > Edit code’.

2. Open up your ‘theme.scss.liquid’ from your ‘Assets’ folder.

3. Paste the following code on the very bottom of the file

   .video-wrapper iframe {
    width: 70%;
    height: 70%;
    margin-left: 15%;
   }

   You can change the ‘width’ and ‘height’ to a different percentage, and ‘margin-left’ is to center the video. If you choose to change your width other than 70%, you will need to change your margin size as well. On the other hand, if you’d like your video to be left aligned, feel free to remove this line.

4. Click ‘Save’.

It is important to note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, I strongly recommend duplicating your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, if you're using a Shopify developed theme, I can also submit a request on your behalf to our Theme Support to see if they are able to make the changes for you in accordance with our design policy. If you wish to explore this route, feel free to follow back up and we can continue on.

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

Kind Regards,

May

Shopify Support

[ericTreeLight]

Spent a long time with support yesterday. Their theme developer tried to say it was a YouTube issue. Wrong! It's a theme issue. You can set your size in YouTube, or you can edit the iFrame attributes directly. Either way, they are correctly interpreted and honored in the editor window -- but they are NOT honored when the page is displayed.

The only workaround I have so far is to put in a 2-column table with text to one side and the video on the other.
The video then automatically resizes to take an appropriate amount of space.

[ericTreeLight]

WRONG AGAIN. The "non-solution" below SEEMED to work. But an examination of this page shows two videos that are sized differently, even though they have the same iFrame attributes (as I discovered when editing), so clearly the videos are being automatically resized by the table-handling code, not the iFrame-code.

The REAL WORKAROUND then, is to to:

1. Create a table with two columns (to put the video at left or right), or three columns (to center it)
2. Go to HTML mode.
3. Put non-breaking spaces (&nbsp;) into the adjacent column(s) to force them to have the desired width.
   • <tr> starts a "table row". <td> starts "table data" (a cell). But the spaces between the <td> and </td> (the closing tag for the cell.)
   • Use a line like this: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
4. The video is then resized to take up the adjacent space.

(This solution might also work for a single-cell table, with non-breaking spaces to the right and left of the video.)

NON-SOLUTION(s):

When placing the video inside a table cell, the width-settings ARE honored.

In my workaround, I have text on one side and a video on the other. That works wonderfully.

Alternatives:

1. It is at least POSSIBLE that if you create a one-cell table and put the video iFrame in THAT,
   then the settings will be interpreted correctly.
2. Alternatively, create a two-column, one-row table and leave the 2nd cell empty.
3. If neither of those work, create a two-column, one-row table and put a period in the second column.

For a centered video, see what happens with the above techniques, or create a three-column table
with the video in the center column.

[k-n_gus]

Hi @May It's been a while since you posted this, so I'm hoping someone at Shopify can advise... 

I have tried adding the code you suggested and guessed at the changes I would make to make it full width. But nothing changed with the video that is embedded on the page. Is there something else that I need to do? Or do I need to re-embed the video file now? 

code screenshot uploaded 

https://www.bluandgreen.com/pages/our-story

password: todaybebluandgreen

[James0521]

Hello would you be able to share a screen shot. I tried doing what you said but it still doesnt work. Thank you.

[James0521]

To resize a video in shopify admin, click on the product you want to edit then click to "<>" button to open HTML editor. The part of code that says ```<iframe width="640" height="360"``` is the video size, and we can change this to be smaller!
Choose an aspect ratio like 336 x 189 using this tool: calculateaspectratio.com
will help ensure your video is displaying undistorted while you're finding the perfect size for the video

[sbdreamin]

this doesn't work in my template, which is Turbo by Out of the Sandbox, which is forcing my videos to be full width even though the iframe is defined as 560. We've searched all over and can't find how to change that.