Connecting 3D/360° Tour Buyers to Service Providers powered by
the Most In-Depth, Relevant and Up-to-Date Content for the 3D/360° Community
Join FREE! 50+ Benefits
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
Option #1
Find a 3D Tour Photographer Map
We Get Around Network Find a Pro Service
Matterport Service Provider? Join We Get Around Network
Option #2
Book a Matterport Pro in 60 Seconds
We Get Around Network Instant Booking Service
Powered byKoaWare
Matterport Service Provider (USA)? Join KoaWare Free! Register Now
Last 30 Days: 48,592 Page Views | 11,802 Visitors | 82 New Members
WGAN Knowledge Base | Total Posts: 60,177  |  Total Topics: 9,309
5,169 WGAN Members in 129 Countries
We Get Around Network Forum
WGAN Training Academy (Learn more)
WGAN-TV Channel
CAPTUR3D Training for Matterporters: Part 5 of 5
with Phoria (CAPTUR3D) COO Steven Kounnas
WGAN-TV: Coming Up
Live at 5
5 pm EDT (GMT -5)
Tuesday, 20 August 2019
Add to My Calendar WGAN-TV Program Schedule | Need Help? | All Videos
3D ShowcaseEmbedHTML

Better embed HTML for mobile232

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:

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='' 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:

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

Post 1 IP   flag post
Jamie private msg quote post Address this user
Thanks Craig
Post 2 IP   flag post
WP3D Models
ThreeSixty Tours
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:

One thing to note is that while this solution (from 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. "" 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:

Additionally, the 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!

Post 3 IP   flag post
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.

Post 4 IP   flag post
WP3D Models
ThreeSixty Tours
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:

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

Cheers! rp
Post 5 IP   flag post
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.


Post 6 IP   flag post
WP3D Models
ThreeSixty Tours
rpetersn private msg quote post Address this user
That's what I like to hear!
Post 7 IP   flag post
60914 7 7
This topic is archived. Start new topic?