Video Embeds - Full Width not showing in the blog post

tminarik

MD customer
Messages
63
Reaction score
11
Location
London
Website
webauditr.com
I've embedded a video from YouTube via the video embed element provided in the Gutenberg editor.
I've selected the 'full width' option and saved the blog post. But the video does not show full width on my published blog post.

Also tried the #wide width' option but doesn't work either. Not sure what else to do.
 

Attachments

Last edited by a moderator:

Alex

MD developer
Messages
4,959
Reaction score
1,176
Heh, I found this on my own and snuck it into MD4.9.0.1 but this was after we had resolved your prior issue. I just bumped up the version to MD4.9.0.2 so you can auto update and get the fix for this. 😅 This was another one line typo, but I won't make you go into the files to fix it.
 
  • Like
Reactions: Ray

tminarik

MD customer
Messages
63
Reaction score
11
Location
London
Website
webauditr.com
I just want to say how amazing your support is! Thank you Alex!!

I've updated the theme (thanks for making it 'one-click' simple) :)

But, it seems the video has now only aligned left but is still not 'full width'.
I've also checked in a new 'private browser window' just in case its a cache issue on my side.
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Great, looks like we fixed half of the issue - the next is to get the video to scale in the now full width container, which also looks to be part of the known Gutenberg styling inconsistencies issue.

Luckily MD already has a built-in helper class that should help us here. Go back and edit the block and under its "Advanced" tab add the video-wrap class and save. Then refresh the page and the video should scale fully.

I just want to say how amazing your support is! Thank you Alex!!
It is my pleasure, we will get you to where you need to go. :)
 

Alex

MD developer
Messages
4,959
Reaction score
1,176
Hey @tminarik, I have been looking into this and I believe MD has done everything it needs to for this to work. My next question for you is can you change the video dimensions from the editor? Right now I see the embed is 500x281 in the code where YouTube's default video size is 560x315. Can you try changing the video size to something like that, or use this embed code YouTube provides:

HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/mnNj78PoxhI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

tminarik

MD customer
Messages
63
Reaction score
11
Location
London
Website
webauditr.com
Thanks Alex, I did try to embed the iframe from YouTube using the HTML block – instead of Gutenbergs ‘add video URL’ feature.

I know I can adjust the dimensions in the iframe code, but making it bigger than the default, does not keep/display the video dimension in the published blog post.

Not seeing any options to adjust anything in the HTML block.
 

Attachments

Top