Responsive Video in Content Modal

Support
#1

Hi,

I have embed codes pasted into content modals to play videos when clicked. I’ve added some CSS to customize the look and they are working great on desktop. However, I want the videos to be responsive; I saw a thread in this forum that referenced wrapping the modal in a div that added top padding and then adding a class to the iframe of “resp-iframe” and further CSS based on that class. When I tried this, the video plays ok on mobile, but it is now tiny in playback on desktop, which is not ideal. Is there a way to make it responsive to screen size? Thanks!

#2

Hello Marta,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#3

Thank you, I have sent a secure note with our login details.

#4

Hey Marta,

I have logged in. I could not find the mentioned page.

Most of the pages were edited using Elementor. Can you please provide the url of the page were we can find the video?

Thanks.

#5

Hi RueNel,

Yes, the details I provided were not to log in to the PWO Staging site directly from the Bluehost back end. But rather to go to the regular PWO site, then access the Staging environment from the WP dashboard of the regular site. The Staging site that you are referencing is a whole separate environment, and not directly linked to the regular site.

Let me know if you need any further clarification once you’ve accessed the site the way I mention. Thanks!

#6

Hello Marta,

It turns out that you have added a custom css which is incorrect. You have added this:

.e6944-32.x-modal .x-modal-content-inner, .e6944-34.x-modal .x-modal-content-inner, .e6944-36.x-modal .x-modal-content-inner, .e6944-38.x-modal .x-modal-content-inner {
padding-left, padding-top, padding-bottom: 0;
padding-right: 8.5em;
margin-right: 2em;
}

Please remove it and replace it using this code instead:

.x-modal iframe {
    max-width: 100%;
}

Please let us know if this works out for you.

#7

Hi RueNel,

That did work, thanks!

I’m having another issue, however. I’ve been working on the site in a staging environment (as you had the login details for) and have now switched over to production. The options that I see for designing elements and pages in production are very different from the ones I see in the staging site. For example, in the staging site when I inspect a Section, I see options for “Setup”, “Design” and “Customize”. However, when I am in the production site I only see “Design” and “Customize”. And there are far fewer options for each element as well. Is there a setting somewhere that’s hiding those options? I’ll re-send the login details in the secure note so you can observe the differences between the two sites. Thank you.

#8

Hello Marta,

Thanks for updating the thread.

Under X > Settings > Permissions > User Preferences > Advanced Mode and select Always On.

To learn more about permissions manager, please take a look at following resource.

Thanks.

#9

Thank you very much Prasant. I have another question about differences between the staging site and production site rendering. For some reason when you look at the production site, several of the pages (Frequently Asked Questions, Conditions-COPD, Conditions-PF, Conditions-PH) are showing no Cornerstone content in the builder (and also no content on the front end) despite showing Cornerstone shortcodes in the WP page editor. These pages were all rendering properly yesterday, and I don’t know why the shortcodes that are being displayed on the back end aren’t resulting in content rendering in the builder or on the site.

Any help would be very appreciated, thank you!

#10

Hi Marta,

I tried to check the site but the credentials do not work anymore, that sounds like those pages were edited outside of Cornerstone. Were those pages edited in another editor?

In the meantime, please do testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache)

Let us know how it goes,

#11

Hi Friech,

Those pages were all built in Cornerstone via the staging site. When I copied them over to Production, they first rendered, and then stopped. I was referencing the WP editor because I can see that there are CS shortcodes in there, so it appears that there should be content on the pages, but they are showing up (when opened in the builder) with nothing there.

To go back to my original question however…I had removed the CSS related to margin and padding, as had been suggested, and added the x-modal iframe styling instead. The problem is that that causes the video to play at a very small size even when the screen is large. The size of the player will work great for mobile, but it looks very small on a desktop or even a tablet. Is there a way to get the video to be truly responsive? I’ll send our login details in the secure note. Thank you!

#12

Hello Marta,

When the page were created with Cornerstone, you should be able to see Edit in Cornerstone when you try to edit the page. You are not suppose to switch between Editors as well.

By the way, I have edited your homepage. In each of the content area modal, I set the content maximum width for the modal to 100%, made the background color to transparent and then set the padding to 0. I cleared the caches before I tested the page.

Please check it out now.

#13

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