blend4web background in wordpress

18 February 2016 17:56 #7532
Hello! I've been looking for ages to have WebGL content running on my website, underneath the menu and content boxes, and Blend4web seems like it might actually work. It's very easy to get an html page running, although what I really need is to make this my page-home.php background.

So… any suggestions? Is there some simple way I haven't stumbled across yet? I don't know much about php or html, but there must be a way, using an iframe maybe, to make this work.
18 February 2016 18:11 #7533
Hi and welcome to our forum!

This nice tutorial by Will Welker may be useful for you.
Development Lead | Twitter
18 February 2016 18:34 #7534
Thanks, there's some useful info in his videos, it's given me some ideas for the near future, but although I didn't watch everything I don't think it tells me how to add it to a wordpress background.

I find it strange that there's so very little information online about how to integrate webgl into wordpress in this way. It's such a common web platform, and I would have thought many by now would have wanted to load these sorts of backgrounds beneath the rest of their content. If we can play videos, why not interactive content as well?
18 February 2016 18:55 #7535
I see. Perhaps this can be achieved by using an absolutely positioned iframe element with its z-index set to a value lowest among all other elements.

HTML code:
<iframe style="position: absolute; width: 100%; height: 100%; z-index: 0;" 

Development Lead | Twitter
18 February 2016 19:55 #7536
Nope, sorry, doesn't seem to be any way of just pasting an iframe into a wordpress theme's background code, I tried a number of things and the closest I can come is embedding it onto a page and having a small, framed version inside the content box.
20 February 2016 14:19 #7583
So I guess there's no blend4web users here that are also knowledgeable about wordpress? There must be a way to do this, but in my posts in wordpress forums there's almost nobody who cares about webgl.
22 February 2016 10:36 #7616
It should be easy to do, just find the skeleton of your wordpress template.
Add the code given and it will work like a charm
24 February 2016 01:56 #7652
You're talking in broad generalities, that really don't help me get any closer to the answer. I've tried adding some code to certain sections to no effect. And also, considering that I've found very, very few wordpress sites using webgl, it can't be all that simple.
25 February 2016 10:19 #7717
Hi! This can be done by editing the appropriate template and css theme files.

Do you want something like this: link?
Blend4Web Team
25 February 2016 18:27 #7740
Yes! Something like that, exactly. It's literally the first example I know of where the background on a wordpress site has been replaced with webgl.

But I still have no idea how to get that to work. My template even has a feature where if someone looks at it on their phone, it'll replace a video background with a static image, so if there was a way to just replace the video with the blend4web html, that would be great. That way mobile users would still get a photo instead.

Someone else told me this though:

"it’s not html, it’s base64 encoded into the template which could be a problem, since you now cannot change the way it works since everything is inlined you need someone to implement this in a correct way, else it’s gonna bite you in the ass sooner or later. if you put it in a page with contents/videos/images etc. it’s gonna behave differently, especially on for example an ipad inlined code means js/css IN the html page, instead of loading it"
Please register or log in to leave a reply.