Better embed HTML for mobile232
Pages:
1
Orange, California |
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 | ||
|
Jamie private msg quote post Address this user | |
| Thanks Craig | ||
| Post 2 • IP flag post | ||
Missoula, MT |
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: https://www.wegetaroundnetwork.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 | ||
|
Orange, California |
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 | ||
|
Missoula, MT |
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 | ||
|
Orange, California |
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 | ||
|
Missoula, MT |
rpetersn private msg quote post Address this user | |
That's what I like to hear!  |
||
| Post 7 • IP flag post | ||
Pages:
1This topic is archived. Start new topic?