How to make LearnDash video progression videos responsive on all devices

learndash-video-progression-responsive.css

/**
 * 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%;	
}

Added video element.

/**
 * 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%;	
}

Thanks. I just updated the snippet to include the <video> element.

Hello- I am using Learndash and Divi and having issues with the video not displaying correctly - basically the video bottom is chopped off. The video displays just fine outside of learndash. Some videos display properly others do not
https://vimeo.com/363102783 that is video

That is how it displays on learn dash page
Help

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.

I have to be honest - your support is pretty terrible- it was a learn dash issue - needed to add custom css code to fix the learn dash issue You guys need to work on your support - telling me to hire someone is not support

…

Sent from my iPhone

On Jun 1, 2020, at 9:02 PM, Dave Warfel ***@***.***> wrote: ***@***.*** commented on this gist. 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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

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.

FYI others have had same issue as that is how I found the code fix - it was posted under learndash known issue with Vimeo :)

…

Sent from my iPhone

On Jun 1, 2020, at 9:27 PM, Dave Warfel ***@***.***> wrote: ***@***.*** commented on this gist. 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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

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.

Sorry for sounding aggressive- I appreciate your help - I had sent learn dash a request several days ago - I just assumed you were replying to that Thank you for trying - been frustrated with learndash issues and their lack of support before I appreciate your trying to help

…

Sent from my iPhone

On Jun 1, 2020, at 10:14 PM, Dave Warfel ***@***.***> wrote: ***@***.*** commented on this gist. 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. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

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!