Modal and Video Element Options

[KennyReff]

Hey there, Coding Aces. I’ve got a Modal button that activates a Video element. Really happy with the creative options, but there are two issues.

• On the smallest mobile screen size, the video is not centered.

• After exiting the video pop-up, it continues to play and you continue to hear the audio if you haven’t manually stopped it prior to exiting the modal.

Thank you.

[nabeel]

Hi Kenny,

Thank you for reaching out to us.

1. I see you have set the Min Width to the Modal element, try setting it to auto to fix the video centering issue in smaller devices.

2. To fix the video playing issue, add the Custom Attribute: data-rvt-offscreen-reset in the Video element to stop the video from playing when you close the Modal. Simply add it as a Name, no Value needed.

Hope this helps!

[KennyReff]

Thanks so much, Nabeel. The custom attribute worked like a charm to stop the video from playing. And setting the Min Width to Auto did indeed center the video on mobile. But it’s extremely small. That’s why I had a 300px width setting in there. Can we get the video to be centered, but also very close to the width of the screen on mobile?

For testing purposes, let’s please work with the modal and video in the first row of the page (“American Veterans Center”). The following rows still have other values. Thank you.

[nabeel]

Hey Kenny,

Glad your video query is resolved. To fix the centering issue I went ahead and added the following code in the Element CSS of the modal element (the first one)

@media screen and (max-width: 767px) {
  $el.x-modal {
    padding-right: 0.5em;
    padding-left: 0.5em;
  }
}

Please note that the code provided above serves as a guide only and is to help you in getting started, maintaining the code will be out of our support scope. If you would like further help with customizations like this or 3rd party plugins, I’d encourage you to subscribe to our One service.

Hope this helps!

[KennyReff]

Perfect. It looks great! Thanks so much.

[prakash_s]

You are most welcome, Kenny.