Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save davewarfel/55fcf5ed586ac816a2fae64f40d8f7b7 to your computer and use it in GitHub Desktop.
Save davewarfel/55fcf5ed586ac816a2fae64f40d8f7b7 to your computer and use it in GitHub Desktop.
How to make LearnDash video progression videos responsive on all devices
/**
* PLEASE NOTE: THIS IS VERY OLD CODE, AND USED TO WORK FOR THE "LEGACY" TEMPLATE, BEFORE LEARNDASH 3.0. IT ALSO DEPENDS ON WHAT THEME YOU ARE USING.
*
* IT MAY OR MAY NOT WORK FOR YOU.
*
* I RECOMMEND YOU TRY ENABLING/DISABLE THE "RESPONSIVE VIDEO CSS" OPTION IN LEARNDASH SETTINGS IF YOU'VE HAVING VIDEO ISSUES.
*/
/**
* This should work for all types of videos: YouTube, Vimeo, Wistia & local videos.
*
* These styles should be copied & pasted to a child theme or the "Additional CSS"
* area of the WordPress Customizer.
*/
.ld-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.ld-video iframe,
.ld-video object,
.ld-video embed,
.ld-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@davewarfel
Copy link
Author

Your issue could be related to several things. It's hard to say. Could be a Divi theme issue.

But you could also try going to LearnDash LMS > Settings and enabling/disabling the "Video Responsive CSS" setting and see if that helps. Otherwise... contact support, or hire a developer to take a look and try to fix it for you.

@kgwydir
Copy link

kgwydir commented Jun 2, 2020 via email

@davewarfel
Copy link
Author

I don't work for LearnDash. I'm an independent developer who uses LearnDash and gives a ton of information, tips and code snippets away to the LearnDash community for free. I have a handful of free & premium plugins, and I provide excellent support for my customers (and users of the free versions). Also, hiring a developer was the last option I suggested, after providing 2 other suggestions to try first.

If it was solely a LearnDash issue, I would think thousands of people would be experiencing it, because there are likely thousands who use the LearnDash-Vimeo combo. Also, if it's solely a LearnDash issue, they should fix it in their core code and not have to provide you with custom CSS.

I'm not blaming you, as I know you have nothing to do with whatever bug you're experiencing. I'm just making some observations about the details you've laid out. I'm glad you were able to fix the problem.

@kgwydir
Copy link

kgwydir commented Jun 2, 2020 via email

@davewarfel
Copy link
Author

Care to share the URL where you found the fix? I looked on LearnDash's known issues page, and it's nowhere to be found on there.

@kgwydir
Copy link

kgwydir commented Jun 2, 2020 via email

@davewarfel
Copy link
Author

I appreciate your response 🙂. No hard feelings. It was a misunderstanding.

I have been frustrated with their support in the past as well, so I feel ya on that one.

Best of luck with finishing up/launching/selling your courses!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment