YouTube Videos and Shorts as Product Videos – problems with simplified player

Hello,

I tested the feature to add product videos directly on top of the product image or product gallery images. I noticed since version 7.2 from 26-04-2023 that YouTube shorts is supported as well.

However, I do have some issues with it.

1st)
It seems to me that the cover and contain setting is mostly mixed up. In most of my test cases “contain” is doing the opposite to what it should do. However, there is a test case where it works as expected. It seem it depends on how the YT URL is structured

My finding shows that there are different results depending on which kind of link we use. We have a portrait YouTube Video recorded with an iPhone. Sometimes they are below 1:00 minute (Shorts), sometimes above 1:00 minute (normal YouTube Video)

https://www.youtube.com/watch?v=123456789
If I want that the entire video in portrait is shown, i.e. not getting cropped, I must set simplified player and cover (actually this must be “contain”)

https://www.youtube.com/shorts/123456789
If I want that the entire video in portrait is shown, I must set simplified player and contain

https://youtu.be/123456789
If I want that the entire video in portrait is shown, I must set simplified player and cover (actually this must be “contain”)

You can see that this is a bit confusing.

2nd)
As my goal is to show the entire video (contain) no matter how the settings above are mixed up. I want that the full portrait video is also shown in the lightbox. Sometimes it’s not actually clear how to open the lightbox, but you can do it by just going to an image and open the lightbox from there and then you can go left or right to get to the video in the lightbox

My findings:
When using the simplified player I am never able to show the full portrait video. In the lightbox it’s always cropped. However, this is only happening on desktop. On mobile it works as expected.

Additionally, I noticed when using the native YT player insted of the simplified player it works always as expected.

3rd)
When using the simplified player on mobile it shows the title of the YouTube video as overlay. This is only shown in the very first seconds of the video. The title if longer than the width of the smartphonse screen is cut off. This is obviously not a big deal, but still something that I would try to get rid off

I only could test this with one single YT channel and one single website, but it seems to me that it should be possible to reproduce it so that you are able to see it for yourself during the troubleshooting process.

Thanks in advance for getting into it

best regards
Markus

Hello Markus,

Thank you for your detailed message regarding the issues with YouTube videos and shorts as product videos.

To better understand the problems you’re experiencing, could you please provide specific examples from your website? We need an example product with the videos added where we can see the problem. This will help us accurately diagnose and address the issues.

Looking forward to your response.

Best regards

Hello Artem,

I am sharing a private video that shows a few of the problems. Here you should clearly see the main issues. I went over all possible combinations already today wich took quite a few hours to troubleshoot, so I am not going over every single detail in the video, but it should show very clearly where the problem is. Then the results and findings I presented should hopefully make a bit more sense to you.

best regards
Markus

Hello,

Having examined your issue, we see that your video is in vertical orientation, whereas by default, all videos on YouTube are uploaded in a 16:9 horizontal orientation. Therefore, in your case, it would be better to upload the video to YouTube Shorts, which would prevent this problem, or add “shorts/” to the URL. For ex.: https://youtube.com/shorts/

From what I know, YouTube is making a Short automatically when the video length is below 1:00 minutes. If it’s longer than 1:00 minute than it’s an ordinary YouTube video

The videos are recorded in portrait (vertical) for a better viewing experience on mobile.

However, with all I figured out and added / documented in here, can you follow up on this and figure out what the problem is.

There is more than one issue as I described in the original post – and I think it should be possible to reproduce it.

Thanks again

best regards
Markus

Unfortunately, at the moment, our theme is designed for videos with a horizontal orientation, not vertical. YouTube has specifically provided YouTube Shorts for such vertical videos. In the future, we will consider how to fix this issue. However, for now, to resolve this problem, you need to change the URL for your video from https://youtu.be/ to https://youtube.com/shorts/.

But this still doesn’t explain and solve the inconsistency … I tried to explain everything in my first message, it should all be there

What you are saying explains that issue with the lightbox on desktop but it doesn’t explain the issue with mixed settings and wrong settings for cover/contain on the simplified player (I think I also showed this in the video I shared in private)

To fix the photoswipe issue, try to add the following code snippet to the Custom CSS area in Theme Settings.

body .pswp__zoom-wrap .wd-video-contain.wd-video-design-theme .wd-youtube-shorts {
    left: -100vw;
    right: -100vw;
    top: 0;
    bottom: 0;
}

I tried to understand what it should do – I tested it, but I could not see any difference.

I set it to simplified player and CONTAIN so that it contains the entire video. It’s cropped. The provided code does not make any difference, not in the normal view on the product page, not in the lightbox either

We switched now to the native youtube player.

But as I showed very detailed in my first message, there are things mixed up – one time I would need to use contain, next time I need to use cover. I reproduced it and showed it in a video as well to you.

Not sure what else I could do

Hello,

Please send us your admin access and a link to the product where you have this video.

Kind Regards

I added all the links in the private section – some youtube links, a link to a product, the login to the staging environment. You should and will be able to reproduce this on your test sites as well, I am quite certain about it

Access will automatically be turned off in 1 week.

Thanks

[Artem Temos]

Hello,

We have checked your website and noticed that you added the custom code we sent, but you did not change the URL to https://youtube.com/shorts/. Therefore, we have made the changes ourselves, and you can check how it works here:

Best regards

• This reply was modified 3 months ago by Artem Temos.

Could you please edit your post and not share our URLs in public?

I implemented when testing everything in the live system, I only provided access to the staging site now for you

I’ll test this later again with the different video formats – I analyzed the YT links when troubleshooting and noticed there are 3 different kinds of links and possibly even more. I am not sure how reliable your workaround is, the change you did does work well, but I am not sure if it works for all videos – you noticed in my testing that different videos led to different results, so I’ll need some time to check this out now after your modification

[Author]

Posts