Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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%;
}
@Carve

This comment has been minimized.

Copy link

@Carve Carve commented Sep 27, 2019

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%;	
}
@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Sep 27, 2019

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

@kgwydir

This comment has been minimized.

Copy link

@kgwydir kgwydir commented May 31, 2020

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

push to open display

That is how it displays on learn dash page
Help

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jun 2, 2020

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

This comment has been minimized.

Copy link

@kgwydir kgwydir commented Jun 2, 2020

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jun 2, 2020

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

This comment has been minimized.

Copy link

@kgwydir kgwydir commented Jun 2, 2020

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jun 2, 2020

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

This comment has been minimized.

Copy link

@kgwydir kgwydir commented Jun 2, 2020

@davewarfel

This comment has been minimized.

Copy link
Owner Author

@davewarfel davewarfel commented Jun 2, 2020

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