How to resize popup video?

[momstar]

Hi. I have a button using these shortcodes:

[button class= "video-popup" shape="flat" size="large" href="https://www.youtube.com/embed/vxokmCPkv00?rel=0&showinfo=0" title="Example" lightbox_video="true"][x_icon type="toggle-right"]Watch an Intro to MomStar Manifestation[/button]

[lightbox selector=".video-popup" ]

I want to resize the video. Using the _scale options is not working. How can I do this?

Thank you!

[nico]

Hi @momstar,

Thanks for writing in.

Would you mind sharing us your URL so we could see a better look on your setup and we could determine .

You could try this code below, to be added in your custom CSS:

.video-popup{
     width:70%;
} 

Let us know how it goes.

Thanks.

[momstar]

@nico

.video-popup{
     width:70%;
}

Hi, Nico.

I tried adding that code to my CSS, but it changed the size of the button itself, rather than the video.

This is the page I’m working on: https://momstar.me/?page_id=644&preview=1&_ppp=a07b5209ea

Thank you.

[christopher]

Hi there,

Unfortunately, the given URL is not working for us and it redirects to a page telling that the link is expired. I pasted the code you mentioned in the original post to the Raw Content element in Cornerstone and the video in POP up screen is responsive.

But I tested the case on the theme version 5.2.4 and Cornerstone version 2.1.6. So if it is not responsive in your case kindly update the theme and Cornerstone to the latest versions.

Unfortunately, you can not use the _scale property for the videos, it is valid only for images. The code you use is an iFrame which is getting in responsive mode automatically and the -scale property cannot change that.

Thank you for your understanding.

[momstar]

@momstar

.video-popup{
width:70%;
}

Hello. I updated to the latest version of Cornerstone. Unfortunately, I’m still having the same problem. The page is:

https://momstar.me/?page_id=644&preview=1&_ppp=64e3935655

And here is a screen grab showing how the button is now 70% width, while the video still pops up full screen.

One other thing: since updating to the new version of Cornerstone, I keep getting the message that the preview html tag is not closed.

How can I fix these items?

Thank you

[nabeel]

Hi again,

Try replacing the previous code with this:

.ilightbox-holder {
    width: 50% !important;
    left: 25% !important;
}
.ilightbox-holder div.ilightbox-container {
    width: 100% !important;
}

For the error message you’re seeing please refer to https://theme.co/apex/forum/t/troubleshooting-builder-preview-warnings/14404 and follow the steps in section that says “The preview HTML did not include a closing ; tag. It may fail to load or work properly.”

Let us know how this goes!

[momstar]

@Nabeel

.ilightbox-holder {
width: 50% !important;
left: 25% !important;
}
.ilightbox-holder div.ilightbox-container {
width: 100% !important;
}

Hello,

The good news is that the video pop up has resized. The bad news is that the button size is still weird. Here’s how it looks:

The page is at https://momstar.me/?page_id=644&preview=1&_ppp=699d082fc0

I will test the plugin disabling to see if it fixed the preview html error and let you know. Thanks!

[paul.r]

Hi,

Please remove this code in Custom CSS

.video-popup{
    width:70%;
}

Thanks

[momstar]

Hello,

That code is no longer in the Custom CSS. I already replaced it with the new code I was given below, but the button is still the wrong size.

New code I was given:

}

.ilightbox-holder {
width: 50% !important;
left: 25% !important;
}
.ilightbox-holder div.ilightbox-container {
width: 100% !important;
}

[nabeel]

Hi again,

That could be the cache, make sure to purge the entire cache (plugin’s cache if you’re using and browser’s cache) then reload the site.

Let us know how this goes!

[momstar]

I purged the browser cache and the WP cache using WP Super Cache. It didn’t do anything.

[ruenel]

Hello There,

The link preview already expired. Can you please send us a new one or allow us to view the page so that we can check it thoroughly?

Thank you in advance.

[momstar]

@momstar

}
.ilightbox-holder {
width: 50% !important;
left: 25% !important;
}
.ilightbox-holder div.ilightbox-container {
width: 100% !important;
}

Hi. It looks like the CSS had to be changed in both “Custom CSS” and “Additional CSS,” which I wasn’t aware of. I made the change in Additional CSS and now it seems to be working! Can you tell me the difference between these two sections and which should be used in what case?

Thanks for your help!

[nabeel]

Hey there,

Additional CSS is the feature introduced by WordPress itself starting with WordPress 4.7 and Custom CSS is added by our theme, both have the same function, I’d recommend you to use Custom CSS so your code is organized in one place.

Hope this helps!