Video keeps playing after closing Modal in PRO

[petitshoo]

Hi,

I’ve seen this question asked before, but in an earlier version of the theme. I can’t find “Dynamic Rendering” in the modal options anymore. Is there a new fix for this issue?

When I click out of the modal, the video keeps playing (as does the sound). The only way to stop is to reopen the modal and hit the stop button.

Thank you!
Jen

[ruenel]

Hello Jen,

Thanks for writing in! Are you using a video player inside the modal? Make sure that you have inserted the correct video URL as a source. Be advised that you cannot use Youtube links as your video source. It must be a Youtube embed code. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[petitshoo]

Hi, Thanks for your response.

I am using the Video Player inside of the Modal with the embed link being the Video that I uploaded to the server and added to the Media in Wordpress.

I have attached a Secure Note with the site details for you.

[friech]

Hi @petitshoo,

You can still use the Content Area Modal, please follow the guide provided here.

You can use the HTML5 <video> tag for adding your video to the Content Area.
https://www.w3schools.com/html/html5_video.asp

Hope it helps,
Cheers

[petitshoo]

Thank you. It does help, but it means I have to redo my whole page that uses lots of modal elements.

I am having some problems with the set up of the content modal with the video tag. I’m ending up with extra space on the side. I thought I’d fixed as it looks correct in the preview. But when I view on the front end I’m getting this:

Thanks again,
Jen

[tristup]

Hi Jen,

I checked the section you mentioned and found the video is showing in a proper dimension within the Content Modal Area. I would suggest you check once by clearing all types of cache and in incognito/private mode of the browser. Please let us know if that issue still exists.

Thanks

[petitshoo]

Hi again,

Thank you for your response. The video you are showing in the screenshot is in a Modal, not the Content Modal. The one that I was using as a test is the first one on the top right that starts with the duck. Can you take a look at that one (the one in my screenshot?).

Thank you!
Jen

[ruenel]

Hello @petitshoo,

You will need to enclose your <video> code with a <div> that has a margin-left and right of auto and a text alignment to the center:

<div style="margin: 0 auto;text-align: center;"></div>

Therefore, the final video will be this:

<div style="margin: 0 auto;text-align: center;">
  <video width="640" height="480" controls poster="https://hm-com.com/wp-content/uploads/2021/05/amazon-toni-and-adamari-poster.jpg">
    <source src="https://hm-com.com/wp-content/uploads/Videos/Fiestas Amazon | Toni & Adamari.mp4" type="video/mp4">
  </video>
</div>

Kindly let us know how it goes.

[petitshoo]

Thank you! This definitely centered the video. And I found a fix to auto-size the horizontal videos, but this fix isn’t working for vertical videos. Are there any tricks for positioning vertical videos in a content area modal?

This is the fix I’m using for the horizontal videos:

Designated in the class under customize in the content area modal settings:

.modal {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

In the CSS:

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

What is in the content area modal content:

        <div class="video-container"><video  class="video" controls poster="https://hm-com.com/wp-content/uploads/2021/05/zumba-poster.jpg" source src="https://hm-com.com/wp-content/uploads/Videos/Zumba Selfish Sizzle 1st Draft High Res.mov" type="video/mp4">
</video></div>

Thanks again,
Jen

[ruenel]

Hello Jen,

Did you removed the vertical video? I could not find it in your homepage. By the way, please make sure that your custom CSS code is valid and correct. See to it that the curly braces are closed properly.

Kindly check your CSS code.

[petitshoo]

Thank you. I have fixed my CSS in the areas indicated.

The vertical video can be found by clicking the button with this image:

[ruenel]

Hello @petitshoo,

As it turns out, you have inserted an incorrect aboslute spelling in your CSS:

The correct one should be:

.video-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 480px;
  height: 640px;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.