I found something, but it’s not working in safari and older browsers.

#lp-code-249 {

left: calc(-50vw + 50%) !important;

width: 100vw !important

}

Hey Elvis - Just to confirm did you want the map to be the entire background of your page? Or just span the exact size of the ‘Custom HTML’ box?

If it’s the latter then you can do so by just setting the ‘width’ and ‘height’ property in the embed code to ‘100%’

Hope that was what you were looking for!

Hi Johnny, I need entire background width.

I have embed code on 100% width and I have also override some of the css with 100% width and it is not working because “#lp-pom-root .lp-positioned-content” div is limiting the page. If I make “#lp-pom-root .lp-positioned-content” div 100% width it break the whole site.

I assume we need some jquery trick or something.

Thank you in advance.

Hey Elvis

Try this:

<style>

 /**

  * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 

  * TS:0002-13-015

 */

 #lp-code-38 {

   width:100% !important;

   height:100% !important;

   top:0px !important;

   left:0px !important; 

   position: fixed !important; 

 } 

</style>

Replace #lp-code-38 with your custom HTML boxes ID

This will stretch the map to the entire width and height of the page. Was that more inline with what you were looking for?

Hi Johnny,

Thank you for your help but this is not what i’m looking for.

Here is website: http://unbouncepages.com/artevent/

I want expand google map on 100% width only.

Hey Elvis - Give this a try:

Drop the following into your javascript box:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script>

jQuery('#lp-pom-block-39 .lp-pom-block-content')

 .css('width', '100%')

 .append('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.5437478600206!2d-123.115227!3d49.285042000000026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5486718276025337%3A0x9e0b0fbb24f756af!2sUnbounce!5e0!3m2!1sen!2sca!4v1416345455256" width="100%" height="100%" frameborder="0" style="border:0"></iframe>');

</script>

Replace #lp-pom-block-39 with your section ID and the < iframe > code with your own map embed code.

I think that should do it. It’s quite a bit of a workaround so I can’t guarantee it will be perfect but hopefully it works for what you were looking for.

If you don’t want the height to expand the entire page section height, just adjust the ‘height’ property to a number of pixels (ex: ‘300px’)

It is working!

This is greate pice of code for Unbounce Templates.

Thank you very much for your time Johnny!

Best regards,

Elvis

Glad to help Elvis 🙂

Hey Johnny, 

I’m trying to do the same thing, but am having issues getting around the template’s set page properties width. 

The div is viewing the HTML snippet as “content” which is defaulted to stay within the boundaries of the page properties set width. 

Is there a way for the HTML snippet to override the set width so that is has a percentage based width? 

Apologies if that is unclear. 

Thanks!

-Matt

Hey Matt! 

We might need to take a look into your page a little deeper to get a better understanding on why it’s not working. Could you link it here? If not, let me know and I’ll have my support team reach out to you directly. 

Hi everyone ! 

I need please install map but without scrolling zoom on:

http://cuanticcuanticoweb.it/studio-dentistico-panzanera

I found here in this page a part of code: 

http://stackoverflow.com/questions/29146888/disable-scrolling-zoom-in-google-maps-iframe

but I can’t do it both   :( 

Please help me !

grazie .😦

Hi Grazie!

Since this isn’t our script I’m not sure exactly how we can modify it to do exactly that, but if you get in contact with the template creator he should be able to give you some pointers. He’s a really friendly guy!

support@surjithctly.in

Hi JUSTIN ! Take it easy… ? I am resolved problem thanks.  See it here: 

http://cuanticoweb.it/studio-dentistico-panzanera/

Scrolling zoom doesn’t’ exist ! Cool ! 😉

Whoa, Aurelio! This looks really great! :) 

I have a quick question about the neat loading animation. Is this just for effect? How have you found this has affected your conversion rates (if at all)?

you speak of animations of services? servizi?

you say this hover effects?

http://codecanyon.net/item/solid-css3-image-hover-effects/12642704

for the moment I’m not selling just building sites…

I wish I had conversions !!! 😉 grazie. Thanks 

Hey Johnny, I tried to use your last script from ‘Nov’14’ to expand a video embedded in ‘custom HTML’ example

<script> <br />

$( "#lp-pom-block-XX .lp-pom-block-content" ).css('width','100%').append('<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');

<br /> </script>    indent preformatted text by 4 spaces/script>

It worked and get expanded to 100% width but not in the provided #lp-pom-block-XX. It gets shifted at the bottom of the page and #lp-pom-block-XX is just empty.

I dont have any knowledge about coding.

Can you please help me to sort it out?

Thanks

Jai

Hey there! Sorry, not sure If I understand this correctly - are you trying to get a full-width video as a section? I’ll be glad to help with some clarity 🙂

Yes, you get it right.

I want to create something like the mobile page in this screenshot.

thanks

Simply hit the section you’d like to set the video background to, and click on “background” in the properties panel. Select video and enter your video URL and you’ll be set! Some more info on that here.

Let me know if that helps!

Hey Stefano,

Sorry, I forgot to mention in my first post that I want to do it in ‘mobile view’. This video background thingy does not work in mobile view and moreover even in the ‘desktop view’ it doesn’t have any sound.

However, with the code provided by @Johnny_Opao, I was able to achieve full width but was unable to fix its height and also for some reason it was getting shifted to the bottom of the page.

Hey Jai

Your use case is a little more complex as Wistia includes javascript to load the video in. So the behaviour isn’t always clear when using the same solution as the google map script above.

I don’t have a plug and play solution for you, but just some suggestions you can try.

I’d separate the script tags and drop them into your ‘javascripts’ box in the builder

<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script>

There’s some unnecessary tags in your script that you posted. Some of which appears on my old solution above (looks like the code may have been altered/messed up when we updated our community). Here’s a cleaned up version with the javascript tags removed:

<script>

$( "#lp-pom-block-XX .lp-pom-block-content" )

  .css('width','100%')

  .append('<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');

</script>

More importantly, I’d make sure you’re targeting the correct lp-pom-block-XX ID. From the sounds of it it’s targeting the wrong page section.

Lastly, this sounds like a different, but a completely reasonable want for using a video on Unbounce. I’d throw this suggestion over to our feature requests section as a improvement for our existing video widget. Perhaps this is something we can eventually build into Unbounce

http://community.unbounce.com/c/feature-requests

Hope that helps Jai. Again i’m not sure if that will fix your issue but at the least I hope it guides you closer!

It works smoothly.

If someone else gonna try it just make sure ‘stretch background to page edges’ box is checked .

Wow, @jai you really are the gif master! 🙌

Just another small issue.

Is it somehow possible to adjust the height of section ‘#lp-pom-block-XX’ according to the width of the video?

The problem I am facing is that if I adjust its height lets say according to my mobile, then visitors having mobile with small screen size will see a weird blank space under the video and visitors having mobiles with the wider screen may not see the video controllers (play or volume button) properly.