Video Aspect Ratio for Mobile on Courses

I have doubts about the aspect ratio of videos in mobile, you see the black fringes at the top and bottom of the video? Are they necessary? they are just taking up space, can I eliminate them?

web: https://www.suenacarajo.com/
pass: carajo

Also, 2 more questions:
1) The name of the course is not showing up above the video, as it should. How can I make it appear?
2) On Mobile, the Next Lesson section sticks to the bottom, even after I scroll down pass the footer, can this be adjusted to stop before the footer? It looks weird seeing the section after the footer

Can you share link to that page? We can check easier

yes, here you go:

https://www.suenacarajo.com/de-sonador-a-emprendedor/tu-sueno-tu-idea-tu-proyecto

It looks like it require to login. Can you provide a test account?

sure, here you go: 

User: suenacarajo@gmail.com
Pass: carajocarajo

thanks!

Did you fix it? It looks fine now

No, I put a cover/thumbnail, but I would like for the thumbnail or video to respect the video aspect ratio. If you play the video, you will still see the black fringes.

Can you help?

Look at the attached picture, when you click on play.

Works perfectly thank you so much!

On 2/24/2024 at 3:46 PM, tuanphan said:

Try this code to Website Tools > Custom CSS

/* Course - mobile - video */
@media screen and (max-width:767px) {
.course-item__lesson-content .course-item__video-container {
    height: 250px !important;
    min-height: unset !important;
}
}

 

@tuanphan Thanks for this code. Is there a way to make the height automatically adjust to the video height?

On 6/22/2024 at 3:46 PM, Arjuna said:

@tuanphan Thanks for this code. Is there a way to make the height automatically adjust to the video height?

I don't know this.