Video shrinking in width after completing topic

Hi @devcri,

I really appreciate all the details you have provided. It’s a huge help, so thank you!

This is interesting because our plugin should not be modifying any HTML code. We do apply some CSS styles to the .ld-video div to make it responsive (because we found that several users were having issues with video sizing using the default LearnDash implementation). But our plugin should not be stripping any HTML.

I’m investigating this now to see what might be the culprit.

Also, thanks for the heads up on the JS console error. I’ll also be looking into that, although I don’t suspect it’s the source of this particular issue. But still something I want to address, for sure.

I’ll get back with you soon.

@devcri — I just tested this out, and I’m seeing a different behavior. I am also testing on WordPress 5.0.3 and LearnDash 2.6.4.

Even when our plugin is disabled, the <div class="ld-video"> is still disappearing after the lesson is marked complete. This behavior is not being caused by our plugin.

You are correct that it is this <div> that is producing the responsive, properly-sized video initially. But the only reason it’s doing that is because of our plugin. If you are not using our plugin, the first time you view a video using video progression (even when it has NOT been marked complete yet), it will be sized poorly.

The only way to modify the CSS so that the video is displayed responsively is to use the <div class="ld-video">. That’s the only element and/or class name that LearnDash provides for anyone to be able to apply any CSS.

Since they take it away after the lesson is marked complete, there is no longer anything we can do to manipulate the size.

If you still think it’s our plugin that is stripping that div, please email us at [email protected] with access to the lesson, and we will investigate further.

As for the learndash.css.map console error… that file should not be loaded on the page. I’m not sure why you’re seeing that error and I’m not, but it should be gone in our next release. It has to do with a new way we are processing our CSS file, but we’ll be removing the line that references this file in future versions, so you shouldn’t have to worry about it.

I do appreciate you bringing it up, though.

Yes, you are right. I just tested it again by disabling your plugin. And this time the div-bracket got deleted again. So, it’s not your plugin. I will have to get in contact again with LearnDash Support.

Thank you for your support!

You’re welcome, @devcri. If you like the plugin & support I have provided, I’d appreciate a quick review. Just a quick note to let people know what you think about the upgraded design and the support I provide.

No worries if you’re super-busy. Just thought I’d ask ??.

Sure. Done. Thanks again.

LearnDash Developer here.

The information above is true. When using the Video Progression logic we wrap a div <div class="ld-video"> around the video <iframe></iframe>. This is how the associated JavaScript knows to process these elements on the page and apply the video progression rules.

Once the lesson/topic is completed there is no need for video progression logic since the step have been completes. So the wrapper <div class="ld-video"> is not included around the <iframe></iframe>.

I can’t promise any immediate fix but will look into changes to the core logic to include the div wrapper after the step is completed. This way the Design Upgrade CSS can still be applied.

But that brings up another issue. If I take the same URL I’m adding to the Video Progression field and add it to the post content. The video showed there is not 100%. It will be whatever size is determined by the WordPress video embed logic. My point is should all videos within the LearnDash content be made 100%?

@pmenard – Thanks for looking into this! For me it would be sufficient to have a div-wrapper for the video progression integration. In the content area I could insert div-wrappers myself if I want to change the layout.

@pmenard, thanks for chiming in here. To answer your question…

In my opinion, yes, all videos inserted within LearnDash content should be responsive. I do think the user should still have the option of setting a max-width, though.

Gutenberg handles the responsive part (if themes enable support for responsive embeds). The core block CSS will apply styles to all embed blocks to make them responsive. I’m not entirely sure if there’s an option to go less than 100%, but regardless, this implementation should work for a large majority of the users.

There are also several plugins that achieve this with the Classic Editor.

Just in case you were thinking of adding code to achieve this with LD… I don’t think this is LD’s responsibility.

In terms of keeping the <div class="ld-video"> wrapper, I do think that is a good idea. It gives folks a way to style a video background, if they wanted, with some custom CSS (or a plugin like ours to target it with CSS).

Would a data-* attribute be the better way to handle the JavaScript logic?

@davewarfel

Thanks for the reply. and I agree this can be handled by other options. I know Jetpack does this. The down-side is you have to install Jetpack. :<>

And I agree this is not something LD is looking to get into. It is my general belief this is best handled by the theme or other plugins.

And yeah that is my plan to change the logic so the wrapper div is always present and we use a data-* attribute to target the one needing progression process. But this might be a while. We are working on the LD 3.0 changes. Speaking of we should probably connect so we can ensure you get a beta and can adjust your plugin accordingly. You can email [email protected]

Ha never mind. I just realized who you are.

??