Connecting 3D/360° Virtual Tour Buyers to Service Providers powered by
the Most In-Depth, Relevant and Up-to-Date Content and Training for the 3D/360° Community
Join FREE! 50+ Benefits
Find a 3D Tour Photographer Map
We Get Around Network Find a Pro Service
Matterport Service Provider? Join We Get Around Network
Book a Matterport Pro in 60 Seconds
We Get Around Network Instant Booking Service
Matterport Service Provider (USA)? Join KoaWare Free! Register Now
One Order  |  One Quote  |  One Contact
Book Multiple USA Commercial Locations
  • ✔  As-Builts
  • ✔  Construction Progress
  • ✔  Facillities Management
Last 30 Days: 52,882 Page Views | 12,700 Visitors | 97 New Members
WGAN Knowledge Base | Total Posts: 63,173  |  Total Topics: 9,904
5,474 WGAN Members in 129 Countries
We Get Around Network Forum
WGAN-TV Training U in Matterport
WGAN-TV: Now Playing
3DVR: Fast-Start Websites for Matterport
Service Providers with Angus Norriss
WGAN-TV Training U
21 Subject 'Matter' Expert Instructors
30+ Courses | 10+ Major Topics
Training via Recorded Videos
Free for WGAN Basic, Standard
and Premium Members
WGAN-TV Program Schedule | Need Help? | Podcast
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
63969 7 7
This topic is archived. Start new topic?