[Resolved] Learndash – Elementor – Generate Press –> Vid not responsive (space above below

[Richard]

I created a ticked @Learndash

Ticket:
1. Responsive Video

I use the “Enable Video Progression” and that adds the video to a “topic”.
When i decrease the size of my browser window to check the responsiveness (AKA reduction of the Hight of the IFrame that is used). I get very disappointed, the video is decreased in size but there’s a huge GAP between title / text and the video. So when on you’re on a mobile phone this is unacceptable (IMHO). Is there a way to fix this problem?

After setting up a Staging Version of my website and giving WPADMIN access and SFTP access to that staging website they found the following:

I’ve been investigating this and I’ve found out that there are a couple issues. First, Elementor adds some padding around the video player. The bigger issue seems to be with the theme. When I switch to a default WordPress theme (in this case, TwentySeventeen), I can see that the video doesn’t have the extra space that the GeneratePress theme puts around the video player. Unfortunately, since the styles are programmed inline, there isn’t a way I can override them. The best thing to do would be to reach out to the folks at GeneratePress and see if they can resolve the spacing issue around the video player.

Please help me Obi-One-Kenobi 😉

Cheers
Richard

p.s. link to specific page in staging website has been entered. –> but if you need acces please let me know where to send the login details.

[David]

Hi Richard,

can you send login details as the page is locked.

[Richard]

Yes how can i email you?

[David]

You can send log in details via the Pre-sales form, please include link to this topic:

https://generatepress.com/contact/

[Richard]

Done

[David]

Hi Richard, thats odd, i can’t see why GP would interfere with the iframe embed for vimeo.
Have you check the Vimeo settings for the video? As currently the iframe is set to a fixed 640px in height.

[Richard]

Hi David,

I’ve searched the Vimeo setting for the video and the embed code does show the 640px –> but i didn’t use that code.
I just used the Video link not the embed code i get from Vimeo. See this link for a screenshot of learndash.

Also other Pages work fine with the Vimeo video’s, just the topic / lesson pages don’t work like they should.
Link

I’m not a programmer, but this is the comment i got from Learndash: Unfortunately, since the styles are programmed inline, there isn’t a way I can override them. The best thing to do would be to reach out to the folks at GeneratePress and see if they can resolve the spacing issue around the video player.

I’m in the middle and really don’t know what i should do…

Kind Regards,

Richard

[David]

Hi Richard,

its the LearnDash short code that is outputting the fixed height iFrame, so maybe their a little confused as to where the extra space is coming from. Looking at the LD documentation the Video URL can also accept iFrame, HTML5 video and embed codes.

Could you try using an Embed of Vimeo instead?

https://help.vimeo.com/hc/en-us/articles/360000710167-Adjusting-the-size-of-the-embedded-player

[Richard]

Hi and Thank you for the information David,

I got an email from Learndash that it’s the Vimeo video that has that fixed height.
I’ve done som testing but still can’t get it to work, i feel like a complete noob 🙁
I’ll resume testing the iframes in a few hours (and have send Learndash an additional email asking for help).

Please leave this thread open for now, i’ll share the solution (in this thread) when i’ve solved my problem.

Kind regards and thank you for your patience with me!

Richard

[David]

LearnDash should be able to help with embedding a responsive iFrame/HTML5/Embed code. Keep us posted

[Richard]

Info: LearnDash ticket has been upgraded to be addressed by a LD-developer.

* I’ll keep updating this tread untill the issue is resolved

[David]

Thanks Richard

[Richard]

Solution:

I’ve found a free plugin called: “ARVE Advanced Responsive Video Embedder”
Just install and activate and all your the video’s (including LearnDash progression Video’s) will be responsive.

Additional tip: The ShortCode for inserting LearnDash video’s is [LD_video] (without the capitals)
So not [ID_video] (without the capitals) –> this is the correct code [ld_video) first letter is non capital “L”.

The Problem:
All LearnDash does when a video URL is put inside the video field, is call the built-in WordPress embed code, put the video link inside, and place that embed code inside of the content. From what we see so far, Vimeo’s code is setting parameters and this is throwing WordPress’ code off.

I hope someone else will benefit from this information

Regards,

Richard

[David]

Hi Richard,

yes ARVE is pretty neat, thank you for clarifying LearnDashes method and that this plugin resolves the issue. Thank you for sharing i am sure others will find it of use.

[Alan Gautham]

Thanks, Richard for the solution.
“ARVE Advanced Responsive Video Embedder” – seems to be the only solution reached here after wasting lot of hours with learndash support :D.

[Author]

Posts