100% width Google Map

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!

3 Likes

It works smoothly.

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

2 Likes

Wow, @jai you really are the gif master! :raised_hands:

1 Like

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.


Hey Jai!

So awesome that you got it working.

As for the height issue that can be a bit tricky. This is the downside to having a video ‘stretched to page edges’. This requires the section itself to be dynamic in height based on the video size, which would likely require javascript to detect the screen size first before adjusting the height of the section. Doing so could potentially offset the look of the other elements of your page, as all Unbounce elements are absolutely positioned, rather than relative to elements around it.

To be honest I don’t have much of a suggestion here. Stretching it to page edges may not play well without adding a lot of complexity to your script.

Sorry I couldn’t be of much more help. If I do think of anything else I’ll be sure to post an update here

1 Like

That’s fine. I will just change the base colour from white to match the colour of next section and it should look better. :dealwithitparrot:

Thanks for your help :slight_smile:

1 Like

I used the code provided here :

/** * Do not remove this section; it allows our team to troubleshoot and track feature adoption. * TS:0002-13-015 */ #lp-code-310 { width:100% !important; height:100% !important; top:0px !important; left:0px !important; position: fixed !important; }

Works fine for the full width but it puts the map sticked in header.

Thanks for your help!

I’m trying to get the 100% width to work on my page. When using the code snippets above, it does affect the width, but it also removed all scrolling (up and down) on the page effectively cutting off content. Is there a way to avoid that?
thanks!

Did you solve the problem? I’m having the same trouble here and don’t know how to fix it.