Archived topic
YouTube Embeds - Weird Things Happen
7 replies · Started by Dan on June 10, 2021
I recently switched to GP from Divi and have noticed that GP handles YouTube embeds very differently, and not in a good way.
I'm finding it hard to understand exactly what is going on here and would appreciate it if you could take a look and let me know whether this behaviour is by design (for some reason I can't think of) or a bug.
Note that I also switched to the default 2021 theme on a staging site to try this, and it behaved as Divi used to, in what I would deem as the correct manner.
To embed a YouTube video, I simply paste the YouTube link into the editor. Previously, when I did this, the resulting video on the live post/page would appear with the viewing window at the correct aspect ratio of the video. There would be no cropping of the video preview thumbnail, and when the video was played, there would be no black bars above or below the video because the aspect of the viewing window was correct.
With GP, that's not the case. And I can't figure out how it choosing the dimensions or aspect of the viewing window. However it is doing it, it ends up cropping the preview.
I have included some examples of this with screenshots in the private section where I compare the same page on Divi, with the same page on GP. And also a link to the same video running on a 2021 staging site.
Hi there,
Not exactly sure if I'm seeing the issue.
I just checked the linked page and this is the YouTube video I see:
https://www.screencast.com/t/24AHKcT8
And it's the same thing in 2021:
https://www.screencast.com/t/sf607L1FpO
Both go to 100% width of the content container.
What am I missing here?
No, they aren't the same.
On the 2021 site, you can see the entire thumbnail. And when you play the video, because the aspect ratio is correct there are no black bars.
On the GP site, you can see the video aspect is wrong and it crops the thumbnail. You can see this by looking at the text on the thumbnail where it says "Best USB". On the GP site, it is partially cut off. On the 2021 site, it's nowhere near the edge.
Just flip back and forth between your own two screenshots you just provided and you will see the difference.
Please also look at the additional screenshots I included. Those show the problem in an even clearer way because the cropping is far more extreme.
Ahh ok I see the difference. The embed block is a WordPress core block which GP has no control of.
I wonder if the difference is coming from the container width?
What if you use a YouTube block (also from the core) instead of just an embed block?
Yeah, I tried that with the YouTube block. It had the same result.
It's nothing to do with the container width. In the two screenshots I provided, you can see there that the container width is vastly different to that in the example post because I used the GenerateBlocks grid block to create two columns. The resulting difference in output from Divi and GP in the screenshots is huge. Just now, I also tested that same page, built with GB blocks, in 2021 theme. Here are all three screenshots:
Here is a screenshot using 2021:https://www.dropbox.com/s/lmuh36r6u93m78t/Screen%20Shot%202021-06-10%20at%2010.56.57%20AM.png?dl=0
Here is the same page using GP:https://www.dropbox.com/s/grfb0f0pznppkee/Screen%20Shot%202021-06-02%20at%2012.19.39%20PM.png?dl=0
Here is the page using Divi:https://www.dropbox.com/s/fpo02wnxrdojo0d/Screen%20Shot%202021-06-02%20at%2012.20.00%20PM.png?dl=0
As you can see, there must be something going on with GP to cause this huge difference in the way the embed is handled. It is only GP that is showing the viewing window at a different aspect to the thumbnail, and hence causing the thumbnails to be cropped.
Is there some CSS that is forcing the embed height to be a specific dimension?
One note I did find in Wordpress documents is that responsive embeds are not the default. A theme needs to opt into it using add_theme_support( 'responsive-embeds' );
Could this possibly be the problem?
Hmm the theme does add that already:
https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/functions.php#L37
Are you using the latest version?
Any custom functions?
Yes, I'm using the latest version.
I have some mods, but they are all added via Snippets plugin and I have tested this with them all turned off. It makes no difference.
Assume you see the same behaviour if you try and add a YouTube video to one of your own GP test sites? Just use GB blocks to create a container and then a 2x1 grid, then paste any YouTube video into each column. You should see the same issue as me.
This is what I'm seeing in a default install:
https://www.screencast.com/t/0DMf7YtF1zUe
