Youtube video embedded looks cut off on mobile

[Nadjejda12]

Hi There!

I embedded a youtube video from my channel to my website and the preview of the video looks cut off and has a black banner both on top and the bottom of the video when it’s playing on mobile. It looks fine on my desktop although it can be better.

The main issue is the look on mobile. I can’t seem to be able to attach a screenshot of how it looks on my phone to show the issue. I haven’t found a solution anywhere online or here that has helped fixed this issue.

Any suggestion would be greatly appreciated, thanks.

[ruenel]

Hello Nadjejda,

Thanks for writing in! I can see that you have inserted the Youtube’s embed code into your blog post contents. For example, this one:
<iframe width="560" height="315" src="https://www.youtube.com/embed/TWKORT0235M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Be advised that with this embed code, the theme has no control over to the size of the video. The theme only provides the container, still, the video and its control were generated and provided by Youtube.

Thank you for your understanding.

[Nadjejda12]

Thank you for the response. So, are you saying this is a Youtube issue as I have other videos I’ve embedded 4 years ago with similar embedded codes and there isn’t an issue with the way they look on mobile?

[Nadjejda12]

I just did some more digging since I haven’t been adding videos on my website for a while and I realized all the videos aren’t responsive. Not sure if this is an issue with wordpress on my website as I see tutorial videos addressing this and nothing I do based on them work.

I came here because I’m wondering if where I’m adding the css code some of them are sharing in the right place. I know the css code as to do the theme.

I even saw some topics here regarding responsive videos but none really address my issue.

[christian]

Hey Nadjejda,

Our themes never supported the direct iframe embed posting in the content. You probably have a 3rd party responsive video plugin or code that has been removed from your site that’s why your Youtube video no longer works.

What we support is WordPress oEmbed (best for blogging/post) and our Video element (best for Cornerstone-built page).

Paste your Youtube’s video URL directly in the Text Block or Text Editor of WordPress and it will create the necessary container required for responsive video. Don’t use the iframed embed code.

Thanks.

[Nadjejda12]

Interesting. I know wordpress has made some changes in terms of this block thing now. I’ll try what you said, thank you.

[ruenel]

You are most welcome, Nadjejda.