Support Forum

youtube reboot issue

KV kvr28
kvr28
Member

Hello again, have a question on reboot. So I am running some more tests and I noticed youtube videos are cut off

youtube.jpg

So I inspected the element and it is showing a minimum height of 60px and a display as flex which I check marked as can be seen in the lower right corner

youtube2.jpg

 

then youtube shows fine

youtube3.jpg

 

is that a reboot issue or a wp theme issue? I remember seeing a similar issue on a thread the other day but I can’t see to find it, thank-you.

11 Answers

New Answer

MP Mr Papa
Mr Papa
Member

have you seen this:  https://simple-press.com/support-forum/sp5-theme-topics/reboot-undersizing-youtube-embedded-videos/

KV kvr28
kvr28
Member

that’s the thread I was thinking of, but it’s a fresh up to date reboot install with no mods

KV kvr28
kvr28
Member

I have, I downloaded it this morning to make sure I have the latest update

KV kvr28
kvr28
Member

I think I found the issue, but I don’t know what is causing it. It is tied to how much text is before the youtube link

here with the text it looks fine

http://kvr28.staging.wpengine.com/forums/alternative-energy-1/problem-with-post-edit-buttonearing-on-fracking/

with just a few words the video gets cut off

http://kvr28.staging.wpengine.com/forums/problem-with-post-edit-buttonomestead-security-1/the-snag-mag/

I copied the text from the first link and edited the second one with it and the video showed fine

this link has two video posted with some brief text between them

http://kvr28.staging.wpengine.com/forums/general-homesteading-discussion-1/a-electric-sawmill/

I added the text from the first link at the top of the post and they both showed up fine then

IK Ike
Ike
Member

Hey kvr,

It’s something to do with ‘fluid-width-video-wrapper’.. I’m guessing that’s something to do with a plugin or the WP theme?

This container is what holds the iframe. It’s not got a height defined, just a ‘padding-top’. I’m guessing that the inline style of padding-top: 56.2304%; changes depends on where it is rendered on the page, but because of this, you have a container that’s 1px high, and the padding top ends up being the height of the video. This is causing the post content to treat it as 1px tall – I’m not sure why it’s done this way but I guess there must be a reason.

Anyway, the padding top is 445px, and the overall height is 446px. I added ‘height: 500px;’ and it displays as it should. But – I’m not sure how this will work when posting in other places on the page.

KV kvr28
kvr28
Member

I disabled all plugins except for simplepress and it is is still an issue. Any suggestions what I can add to CSS to test and see if it fixes it or creates other issues?

IK Ike
Ike
Member

It’s a tough one really. It’s not part of SP, and if not part of plugins I can only image it’s the WP theme. What worked for me was:

.fluid-width-video-wrapper {
    height: 500px;
    box-sizing: border-box;
}

But this assumes the YouTube videos are going to be a certain width and height. Also, you might want to test several posts in a row to see how it behaves being in a different position.

Best place to put it would be if your theme has a custom style includes box as that should be the last thing loaded, but if not I would probably add that to the end of your themes stylesheet, or child theme.

KV kvr28
kvr28
Member

It works but creates a huge black band at the top and bottom of the video, I’ll just use a theme that reboot works better with. Thanks for your help Ike

IK Ike
Ike
Member

Well you can edit the height, say 450px instead of 500px, which might get rid of some of the overspill, but it’s not going to be an easy one to fix. Depending on how important using that theme is though it might be worth asking the theme developer if there’s an alternative to putting the iframes inside a container with such strange CSS!