YouTube video not displaying correctly on frontend

[jacf182]

Hello.

Whenever I embed a YouTube video in a blog post using the Wordpress block editor (not Cornerstone), it does not show on the frontend.

I solved the not-showing-up part by adding:

.is-type-video iframe {
  position: relative !important;
  min-height: 50%;
}

in Theme Options CSS, and now the video does show up.

The problem is that the video window is shrunk, squished, rendering the video to display in a very small viewing portion of the screen. I’ve tried doing some stuff with the CSS but I can’t get it to display normally.

Here’s the post (you’ll find the video at the bottom of the post):
CLICK

Thanks for your help.

[prakash_s]

Hello @jacf182,

Thanks for writing to us.

You can add this custom CSS code by replacing your code to increase the video height under X/Pro —>Theme Option —>CSS.

.is-type-video iframe {
    position: relative !important;
    min-height: 100%;
    height: 30vw;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[jacf182]

Hi.
Thanks for your help. It sort of worked, but the video frame size is still kinda wonky under different resolutions and not consistent. I managed to make it a bit better with:
height: 28vw;

I’m not really asking for custom CSS, I’m asking how I can fix something that should work by default.
If I choose another theme, the Youtube video displays correctly without having to edit any CSS.
If I deactivate my Child Theme and stick to default X-Theme, it still doesn’t show up, so this clearly is a problem with this theme and it seems to me that it should be covered under normal support and inside the support scope.

Is this a being worked on for a future release? My video still does not display as it should on mobile devices (too small, video controls in wrong places, etc).

Thanks.

[marc_a]

Hi @jacf182,

I just tested on my dev environment, the youtube iframe is just working fine in Gutenberg or default editor. I also notice that there’s something lacking the CSS name of your iframe holder maybe due to corrupted theme files. Would you mind sharing your admin credentials so that we can check the back-end properly? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[jacf182]

Secure note added, thanks for your help.

[ruenel]

Hello @jacf182,

I have logged in and simply cleared your plugin cache. I temporarily deactivated the W3 Total Cache and tested the page again. The Youtube video is now displaying correctly.

This could mean that you only have a caching issue. Upon clearing the cache, the issue has been resolved. Check your page now.

[jacf182]

Thanks for your reply.

I’m sorry, but that is not the case. I regularly clear my cache whenever there’s a theme update or a Wordpress update.

The video still does not show correctly on my devices. The video frame should be normal in size, but it’s not. The height is not how it should be. It looks squashed and there’s a big gap left at the bottom. I’ve tested in various devices and various browsers (in incognito/private windows to avaoid cache issues). Videos simply don’t display correctly. Here’s a screenshot:

@marc_a mentioned earlier that there might be a corrupted theme file, which seems to be a more likely scenario. Which file might that be?

[ruenel]

Hello @jacf182,

I have investigated the issue and I suspect that this is a bug in the latest release. This has already been added to our issue tracker and will be looked into by our development team. I cannot make any promises relating to a fix at this stage. I will add a note to the tracker referencing your report though so our dev team can see there are multiple reports of the issue.

Thank you for your understanding.