Video as Banner PLUS clickable buttons

[swmagic999]

So I read this forum link and get it…

http://forum-archive.weavertheme.com/discussion/11959/video-in-header

Is there a recommended way to add a video to the banner, and then place clickable buttons OVER the video? (yes ins Xtreme o Xtreme Plus).

Is it as straightforward as absolute positioning with z-index?  Or is there an easier way?

Thanks

[scrambler]

You choose whichever insertion area works for you (we need a link to the site if you need help with that). Below the Demo site insertion page for choices.
http://demo.weavertheme.com/insertion-areas/

Then you insert the video and your buttons in this area. In order for the buttons to be over the video, you do need to use position absolute for them and also set the insertion area to position relative as to be the positioning reference for them.

If you need help with that, we need the link to the site, how you will be inserting the video (youtube, vimeo etc,..). If you have “Plus” you can use the Link buttons to make your buttons and insert them with a shortcode.

[swmagic999]

OK, overall I like this solution scrambler.

I put the banner into the pre-wrapper insertion area and the video into the pre-header area.  Note that Youtube doesn’t work so well for this.  Vimeo works much better for autoplay and loop.

Now I am at the menu.  I want to put it into the pre-header area over the banner.  Is it advisable to use the secondary menu and does x-plus menu do that?

http://hhanimalhospital.vet

[scrambler]

I am confused, You want the menu over the video in the pre header or the banner in the pre wrapper.

If the banner, there is no need to have it over. If the video, and if you want an actual menu, not just a few buttons, add an extra menu shortcode with the Video, using the type accordion and one of the style not used somewhere else (primary, secondary or extra) , then we will work the CSS to move it over the video

[swmagic999]

Thanks. I think the menu should not be over the video but in the banner of the pre-wrapper.  So I don’t understand your statement there is no need to have it over.

Yes, I thing the secondary to avoid issues with the primary.  Maybe I just don’t understand secondary vs. xplus menu.

[swmagic999]

I’m assuming I create a new menu called secondary with the same components as mainmenu.

[scrambler]

Crop the banner image to only include the logo and text.
Then add the menu beside it using an extra menu shortcode.
Then we can finalize the CSS so that as the browser gets smaller, the banner image (logo+text) scales with the menu staying on the right side.

[swmagic999]

I put the banner and x-plus menu into the sitewide banner which shows up much lower.

How do I put these two items into the pre-wrapper?

[swmagic999]

I dropped the banner into the pre-wrapper, but now remains the x-plus menu into the other side?

Also, where is that brown background coming from?

[swmagic999]

OK, using [extra_menu menu_name='ExtraMenu'  menu_style='extra' menu_type='standard'] to the right. 
I’m guessing that it wraps because of width?

[scrambler]

I guess I was confused, for some reason I thought you wanted a vertical menu on the right side. If you want a full horizontal menu bar over the image, then it is a different issue, and you should keep your full width image as you had before.

Then use the CSS below to move the menu bar over the image. You can put that rule in the Pre Wrapper BG CSS+ box

.menu-extra {position:absolute !important;z-index:1000;top:10px;right:0px;max-width:78%;}

[swmagic999]

I didn’t think you can add an id or class there. (.menu-extra). 

I put it there into the pre-wrapper BG Css+ box and saved, but don’t see it.  So close now!

[scrambler]

“I didn’t think you can add an id or class there. (.menu-extra).  “

You can, you just need to understand what the final rule will be. That rule in the prewrapper CSS+ box will generate

#inject_prewrapper .menu-extra {position:absolute !important;z-index:1000;top:10px;right:0px;max-width:78%;}

Which means to target the menu-extra inside the prewrapper

I don’t know what you did, but there is no menu in the pre wrapper area any more, only the image. Did you remove the extra menu shortcode? or may be modified it and made a syntax error?

[swmagic999]

hmmm.  I think I did. And I checked the syntax.  Check the attached url

[scrambler]

Where is the extra menu shortcode?

[extra_menu menu_name='ExtraMenu'  menu_style='extra' menu_type='standard']

It is not in the code box with the image HTML

[swmagic999]

Duh.  Thanks

[Author]

Posts