Latest Version: Whitespace between Video and Header

Hi @charfsys,

I’m sorry you’re having this issue!

So we can better investigate what’s going on can you please provide us with a system report. When sending the System Report please use WordPress’s guide line for submitting code!

Additionally, if you can either link us to the page you’re seeing this issue or sends us screenshots of inspector for the CSS on that page and any Javascript errors you see that would be helpful as well!

Let us know if you have any questions about relaying this information to us!

Thanks and take care,

Hi Natalie,

Thank you for the response. Here is the information that you requested. Please let me know if you need any additional information.

System Report: https://pastebin.com/FbRKtGUH

Screenshots of inspector for the CSS: I decided to make a Loom comparing both inspections since I was not sure what you needed to see. https://www.loom.com/share/1dba43a4d665409e945d056f4b841d93

I did not see any javascript errors.

Thanks!

@charfsys

Sorry for the bug here. It’s been lodged in GitHub and a fix has already been submitted. Here’s the details: https://github.com/gocodebox/lifterlms/issues/964

This will be released in our next update (probably Monday or Tuesday of next week).

It looks like you’re probably something of a capable dev since you’re sharing CSS diffs. If you need this fixed right away you could probably adapt the SCSS in the pull request to a bit of CSS you patch your site with manually: https://github.com/gocodebox/lifterlms/pull/965/files

Thanks for your patience and sorry for the bug,

Thanks, Thomas!

I will wait until your next release. I would rather minimize our customizations so that it is easier for our whole team to support it.

I appreciate it!

@charfsys
Could you provide me with an example of how your wistia video embed URL looks like?

View post on imgur.com

Thanks!

@charfsys,

Rocco has figured out that this is actually a different issue which I believe is related to using Wistia’s in-build “video foam” library in association with our newly added CSS to make videos automatically responsive.

What’s happening therefore is that we have two sets of responsive video wrappers nested within themselves.

We can fix this by adding additional compatibility CSS to disable Wistia’s responsive wrappers when they’re found within our own responsive wrappers but you’d still be loading a JS library unnecessarily.

Last I looked you can actually disable Video Foam with a checkbox in your video settings where you grab the embed code. If you disable it the video should still respond based on our new responsive wrappers and you should actually get a slightly faster page load!

I *think* of course.

Can you try disabling Video Foam on your Wistia embed and let me know if that helps?

Thanks

OK, I did some testing on this. If I use the plain “Share Link” video URL like Rocco listed above and upgrade the plugin it works. But, I believe we lose the SEO metadata provided by Wistia when we use the plain “Share Link”.

Unfortunately, I have hundreds of videos in our content platform and changing all of them will take many hours for the team to do it. Disabling the Wistia responsive wrappers will be the fastest way for me to upgrade to the latest version of LifterLMS (which I want to do because of the enhancements made in 3.36.x).

Will you be including the additional capability CSS in a new update to LifterLMS?

Thanks Thomas!

@charfsys

I don’t know if we’re going to add CSS to “undo” responsive Wistia CSS within our CSS. I looked into adding a filter to manage this but that got really complicated really fast.

I’ll unfortunately have to wait to see if we have a tremendous number of users in your situation before I can justify adding compatibility CSS to undo the new responsive CSS for a specific provider.

I really cannot speak for the SEO value of the way you’re embedding videos via using an oEmbed link. I don’t know what you’re gaining with your current method (what is your current method?). I also am not about to pretend to be an SEO expert.

However, if you’re using videos in lessons there’s no seo value at all anyway since lessons aren’t indexable.

You should be able to disable our new responsive CSS with the following override:

.llms-video-wrapper .center-video { padding-top: 0; }

I think that should “undo” it and make it look the way it looked prior to the update.

Could you add this to your site and let me know if it helps?

If it doesn’t would you please setup the following temporary test case for me:

1) Add a new course (set it as “hidden” from catalog and search)
2) Add one lesson to the course and add a video to it by the method you’re using that’s causing the issue.
3) Mark that lesson as “Free”

Post the link here so I can have a look at the rendered CSS and come up with an override specific to your site that will absolutely work.

After we get that sorted out you can delete the course and lesson.

Thanks,

@charfsys,

Were you able to get this resolved with my css fix?

Hi Thomas,

I hadn’t taken the time to update and put in the fix. So I just did it and it is great!

I really appreciate you dropping that line of CSS in here and then asking me (reminding me) to do it.

Thanks for bringing a smile to my face today Brother!