Embedded videos not sizing correctly

Support
#1

I’m using the LearnDash LMS plugin. Embedded videos within my eLearning course’s lessons don’t resize to fit the page. They don’t appear to be constrained to the rest of the ‘template’ like images are. Consequently, the right-hand side of the video player is effectively unseen.

When I switch to the WordPress 2019 theme this problem goes away. Therefore, I’m assuming that it’s Pro theme related.

I’m using the latest versions of WordPress, Pro theme, and the LearnDash plugin.

Video scaling
#2

Hey @ms999k,

Are you using the default WordPress editor and are posting videos through oEmbed or inserting an iframe code directly in the text editor? If so, since you’re using Pro, the Responsive oEmbed styles were not included yet. In X, the fix was already released in the latest update.

Please try adding this code temporarily in Theme Options > CSS. Please remove this once the fix has been released for Pro. It will be listed in our Changelog: https://theme.co/changelog/

// Responsive Embeds
// -----------------

.x-resp-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.wp-embed-aspect-5-3 .x-resp-embed {
    padding-bottom: 60%;
}
.wp-embed-aspect-4-4 .x-resp-embed {
    padding-bottom: 80%;
}
.wp-embed-aspect-4-3 .x-resp-embed {
    padding-bottom: 75%;
}
.wp-embed-aspect-3-2 .x-resp-embed {
    padding-bottom: 66.67%;
}

.x-resp-embed iframe {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

If that doesn’t help, please give us the URL of the page with the video and also access to your WordPress Admin in a Secure Note so we could check the issue. Please also allow us to switch to 2019 theme so we could see the difference.

Thanks.

#3

Hi Christian

I don’t know how the LearnDash plugin works. Within a ‘Lesson’, I’m simply embedding a Vimeo or YouTube URL (e.g. https://vimeo.com/340161229).

I pasted the code as suggested, but it didn’t fix the issue.

I’ve sent you a secure note with Admin details. Here’s one of the problematic pages: https://www.bespokedrivertraining.com/topic/the-essence-of-defensive-driving/

#4

Hi,

Thank you for providing your login credentials. To fix this, you can add the code below in Theme Options > CSS

.wp-block-embed.is-type-video iframe {
   width:100% !important;
}

Please remove the previous css code.

Hope that helps

#5

Hi Paul

Your code had the effect of ‘squeezing’ how the video player looked before it played. When clicked, the whole width of the video could be seen, but with two large unsightly black bars at the top and bottom of the player’s window.

#6

Hey @ms999k.

We’re sorry about the that. I checked and I replaced the code with this:

.is-type-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.is-type-video iframe {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

It’s basically the same as the code I’ve provided except that it targets the Gutenberg block which you’re using.

Your video now is responsive with no black bars.

I’ll add this to our issue tracker so the Gutenberg block could be taken into account.

Hope that helps.

1 Like
#7

Thanks, folks! It now appears as I would expect it to.

Great support. Much obliged.

Mark

#8

You’re welcome. Glad we’re able to help.

#10

https://github.com/themeco/x/issues/2044

…returns a 404 page.

#11

Hi @ms999k,

Our apologies for that. That link was meant to be a note for the report for this topic.

Kindly disregard it.

Thank you.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.