Add portrait 9:16 YoutTube Shorts to Product Page

[shExplorer]

I’m trying to add YouTube Shorts videos to the product page (as media not in the description).

There are several issues for doing this simple thing and I have been able to resolve some of them.

Here’s what I have done:

• Changed the YT URL from https://www.youtube.com/shorts/9xkJtEJbBBM to https://www.youtube.com/watch?v=9xkJtEJbBBM
• In Media, I used “Add from URL”.

This will work, but on the product page, the video is displayed as landscape (with black bars)

I figured adding the following CSS in the product information (in the theme editor) could help and would correct the video look 9:16 aspect ratio:

.media-type-external_video {
  --ratio: 0.5625 !important;
  --preview-ratio: 0.5625 !important;
}

However, this only works for desktop. On mobile, the video preview looks OK, but when I click on it, instead of playing the video, it opens a model (overlay?) which doesn’t look correct (looks landscape), and clicking on that will eventually play the video.

Q: How can I get rid of this modal and make the mobile web work just like the desktop version?

Please see the screenshots below (In order):

1. Mobile - Modal (to be removed)

2. Mobile - preview

3. Desktop - after CSS fix

4. Desktop - before CSS fix

[Zqdo]

Can you share a link to your website so I can see what you’re talking about? Thanks.

[shExplorer]

Sure.

Check this out on mobile:

https://46335d.myshopify.com/products/the-godfather

[Zqdo]

Took a look. I see what you mean. It seems that there is a modal that is being added on the screen with any screen size less than 750 px.

What you can do is try and hide the modal and allow the video to play on click no matter the screen size.

Did you create this feature to add YouTube shorts yourself, or did it come with the theme?

[shExplorer]

Yes, that’s the goal.
Adding YouTube videos comes with yge theme but it doesn’t work with YT short URLs by default. To make it work the URL must e in this format: youtube.com/watch?v=9xkJtEJbBBM

[Zqdo]

What you could do, since you might want to have that modal/cover image feature for a future case and don’t want to mess up the settings, is create a new section, where it’s just the video with the sizing that you want. Then you can add your description and other information. This link is helpful: https://community.shopify.com/c/technical-q-a/remove-cover-image-from-video/td-p/1718698

Do you have any experience creating custom sections on Shopify? I can walk you through it if you need me to.

I can also set this up for you if you need help as well. Let me know.

[shExplorer]

I have seen that link. It’s not what I want to do.
The new section is good only for videos. What I am using is the default product media section which consists of both image and video and many related settings such as thumbnails, 1 or 2 columns and many other things.
So, using a new video section doesn’t seem to be an option.
I need to keep everything as is and just get rid of the modal.

[Zqdo]

@shExplorer , both the product image and video slide are wrapped in a li tag, so something you could try is in your product.liquid page, comment out the tag with all the code inside, and right under the <div class="product-media-container>, paste in the

code to see if that works.

This should remove the modal and keep the same style as the desktop version.

You might have to do some adjustments with the styles though.

Let me know if this works.

[shExplorer]

Thanks for the suggestions.
I’m using Sense theme, and it doesn’t have a product.liquid . Instead it has main-product.liquid .

If found the following tag and commented it out:

It didn’t have any effect, though.

Also, could not find the class “product-media-container” anywhere in that file:

[Zqdo]

Look for this

tag in your code:

- 

and replace everything directly inside the

portion with

and see if that works.

Of course, this would later have to be replaced with the liquid code.

[shExplorer]

What you have shared is the rendered HTML code.

Where exactly do you want me to make this change?
Which .liquid file? Also, what’s the point if it’s not in liquid?
e.g. I can change the CSS style on the fly in the browser and make it work but the whole point is to make the change in the theme code (ie. .liquid template files)
Am I missing something here?

[Zqdo]

This would be in the main-product.liquid file.

You’re essentially replacing the current mobile video player code with the desktop code.

Also, could you share the CSS code you used to make this work? There may be a way to just paste it in directly and fix this issue if I could see the code you used.

[shExplorer]

As I mentioned before, main-product.liquid does not have anything similar to the HTML you posted above. The final html code seems to be generated by all or a combination of the following:

main-product.liquid

product-media-gallery.liquid

product-media.liquid

product-media-modal.liquid

component-deferred-media.css

global.js

media-gallery.js

I have touched almost all of the above and was able to make it look a little better on mobile but still have not figured out where it decides to show the modal and how to replicate desktop-like behavior on mobile.

[Zqdo]

This might be easier if I could see your full code file. If you like, send me an email at zqdo.tech@gmail.com, and we can go from there.

[shExplorer]

Thanks @Zqdo , for helping track down and resolve the issue.

[MRPTerri]

I’m having the same issue. Can you share how you resolved it?