Thick-black border around youtube embed on mobile!?

Ask the community
,
1

We’re experiencing the exact issue that’s in this support article :

The black frame or bars that you see, appear in the preview of the video only.
Important:
When you play the YouTube videos, you will not see these black bars, provided that you are using the appropriate aspect ratio.
We have thoroughly investigated this issue and found that the root cause is on YouTube's end and affects all embedded YouTube videos, regardless of where the video has been embedded.

Can someone explain what this means exactly?
We’ve never seen youtube embeds on mobile being displayed like this. Are we missing something? We’re on the verge of moving back to squarespace because of this.

2

It means exactly what is says it is.

We have thoroughly investigated this issue and found that the root cause is on YouTube’s end and affects all embedded YouTube videos, regardless of where the video has been embedded.

There is nothing Wix can do to sort this out as it is an issue that is at Youtube’s end and until Google fix it themselves, then this issue is always going to be there.

Wix can’t fix something that is nothing to do with them and run by another company.

The black frame or bars that you see, appear in the preview of the video only.

This means that if you test it and you have set the embedded video correctly as stated below, then the black keylines around the video will only appear on your preview which is through an emulator and not on your fully published website.

Important
When you play the YouTube videos, you will not see these black bars, provided that you are using the appropriate aspect ratio.

Exactly as Wix states above, if you setup your embedded video with the correct aspect ratio that is appropriate for that video, then you will not see the black keyline around your video.

If you do not use the correct ratio, then you have to live with the black keyline until you either change to the correct aspect or Google fixes this issue.

Wix can’t do anymore to help, it is down to an outside company (Google) to fix, so if you are wanting this sorted then go to Google support and get them to fix this for you.

3

Thanks for going through these points for me.

First thing I’d say is that this is happening with Vimeo too , exactly the same behaviour.

THE ISSUE:
Both video and custom thumbnail are contained in some sort of 4x3 black box that extends horizontally to full bleed, ignoring the site’s margins.
The thumbnail and video (16:9) scaled up so that extend horizontally to full bleed, and are scaled up.

Here’s some screenshots on an iphone 7, please read the captioned text which explains each frame.

1511×700 99.3 KB

THIS IS NOT A GOOGLE ISSUE
The box is clearly just the padding needed to include the X , which switches the user back to thumbnail mode (including the bottom bar - it’s gotta match! ).
Except that when you first land on the page, before you click PLAY:
1: the X is still there but hidden (so it still takes up that padding space), and
2: the background of the container is just locked to black and is not customizable,
so we’re left with two black bars.

I’m not sure if the original article I linked to was talking about a different issue altogether, but what’s happening here is definitely nothing to do with Google.

We’ve loved all of the other features that WiX offers but this video player just doesn’t cut it. The other video module, the WiX Single Video Player , doesn’t cut it either : you can’t hide the youtube branding, neither with a custom thumbnail, nor a custom embed code to customize the youtube query string.

This leaves us with 2 terrible layouts for our videos when viewed on mobile. So we’ve canceled our wix account because of this and have moved to webflow.com , which gives us much better control over how we want our pages to look, with an interface that feels considerably smarter.

4

I have the same problem and it seems DT TWC is correct, it must be a Wix issue for the X and the three dots for the sharing option. Would be nice to be able to configure/disable that option.

5

I’m using a 16:9 video I’ve uploaded from my computer to Wix. So my issue has nothing to do with Vimeo or YouTube . I’m using Wix Video . My video plays correctly in 16:9 on the desktop but on the mobile it seems stuck in a 4:3 box and so includes the black bars at the top and the bottom. I cannot find an option to correctly display the video in 16:9, there seems to be no such option. I am struggling to understand what this is supposed to mean… ‘ if you setup your embedded video with the correct aspect ratio that is appropriate for that video, then you will not see the black keyline around your video. ’ What is that supposed to mean? Can you be more clear on how to do this? Are you saying the only correct ratio for mobile is 4:3? So I need export a separate video in 4:3 for the mobile view?

I’ve just tried a different player Single Video Player and that is working as it should. So anybody out there struggling with Wix Video like I was, avoid it and use Single Video Player.

6

So many years later and the same problem is present. This is sad.
I use Wix Video. It has nothing to do with a Google problem.

7

This post is from 2019 and will be closed. If you have a question about writing code in velo, you may start a new post and add the relevant snippet there. If you have a feature to request or require some other kind of support please reach out to customer care