3D, VR, 360° and Street View Photographers  |  Real Estate Agents  |  3rd Party Service Providers
Should I buy a Camera? Quiz How Much to Start 3D Tour Business? Calculate How Much Can I Make as a Pro? Calculate Win More Listings? Calculate
We Get Around Network Forum
WGAN Training Academy (Learn more)
WGAN-TV Channel
WP3D Models Founder/Developer Ross Peterson
on WP3D Models Wordpress Plugin V3.0
3D ShowcaseEmbedHTML

Better embed HTML for mobile232

Premium
Member
craigsauer private msg quote post Address this user
For a while now I've been meaning to optimize my portfolio page on my website so it works better on mobile browsers. This morning I finally figured it out and thought I'd share in case anyone needs the same fix my website did.

Previously, I'd just been using the embed code that Matterport provides, but because it had large, hard coded width and height parameters, the 3D Showcases were way too big for mobile devices. (Though they resized just fine when the user clicked on one.)

Anyhow, I found this cool website that generates better embed codes: http://embedresponsively.com/

I ran the Matterport embed code through it and got this:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe width='853' height='480' src='https://my.matterport.com/webgl_player/#model=ue2ubWi9tSw' frameborder='0' allowfullscreen></iframe></div>

So now I embed this on my website instead of what Matterport shares. Here's my portfolio page redone with the new embed codes:

http://www.3dinteriorscanning.com/portfolio.html

Compare this (on a mobile browser) to the way it used to be:

http://www.3dinteriorscanning.com/portfolio_old.html

Craig
Post 1 • IP   flag post
Premium
Member
Jamie private msg quote post Address this user
Thanks Craig
Post 2 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Hey Craig...

Thanks for posting here and I'm glad you also found this web solution. I mentioned this same thing in a post a few weeks back:

http://forum.we-get-around.com/topic/65/matterport--wordpress/

One thing to note is that while this solution (from embedresponsively.com) works much better than the stock Matterport iframe, it still has a couple/few drawbacks.

The main thing is that because Matterport's iframe content doesn't have any responsive features, the text size of the model name doesn't resize any as a viewport gets smaller. This means that if you have a longer model title, or a title with an long string (i.e. "mybiglongwebsiteaddress.com" it often pushes the blue "3D Showcase" button out of view on smaller devices. The only solution here is to make the iframe taller on smaller devices in hopes that the button will still be seen. This requires a custom media query for those sizes.

See here (view on your phone, or shrink up your browser window) to see how the iframe has more height on the embedded models on our site:

http://missoula3d.com/model/construction-example/

Additionally, the embedresponsively.com solution requires that you post inline CSS to each page and it is very repetitive (if you have multiple models shown), adding bloat to your pages that doesn't really need to be there.

Now...I'm VERY close to announcing a new WordPress based plugin that is 100% responsive and takes care of ALL this for you. It includes a slew of other features(including mapping & filtering)options.

Stay tuned to the forum & please reach out with any questions!

Ross
Post 3 • IP   flag post
Premium
Member
craigsauer private msg quote post Address this user
Hi Ross!

I actually though I remembered scanning over something here about fixing this problem, but I couldn't find it when I searched the archives. I'll definitely try to follow along here to keep up to date.

Also, I should probably start a new thread about this, but I've been thinking maybe we should supplement this forum with a wiki or something to use as a repository for stuff like this that new users need to know and gets lost in the depths of the forum archive pretty quickly.

Craig
Post 4 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
Hey Craig...

I'm posting in a few places around the forum this AM as I start to promote a new product (plugin) that I'm releasing soon for Matterport clients with WordPress-based sites. I think it solves most of the BIG issues we all struggle with when managing a growing library of models and trying to promote them in a mobile-friendly way.

Here's the website I created for the plugin:

http://wp3dmodels.com/

Here's a blog post about the product that I recently wrote for We Get Around:

http://www.we-get-around.com/wegetaround-atlanta-our-blog/2015/4/2/matterport-3d-content-management-system-wordpress-plugin-includes-elegant-facebook-integration

Cheers! rp
Post 5 • IP   flag post
Premium
Member
craigsauer private msg quote post Address this user
This looks great! Makes me wish i used WordPress...

I'm not married to the platform I'm on, so I'll give your plugin a try and see if it's good enough to make the switch.

Thanks!

Craig
Post 6 • IP   flag post
3rd Party
Service
rpetersn private msg quote post Address this user
That's what I like to hear!
Post 7 • IP   flag post
41627 7 7
destitute