Place and Resize your Embed

Use this guide to learn how to place and resize your embedded Matterport 3D model. 

Instructions 

Place the Embed Above the Fold 

Make sure your 3D showcase is placed above the fold on your webpage - this will increase engagement, as less people will see and interact with your model if it's lower on the page. 

In general, visitors will stay longer on your page if there is something interactive or playable as soon as the page is loaded. 

Make Sure the Embed Isn't Too Big 

It may seem like making your 3D showcase as large as possible will increase immersion, which is true to an extent. But it's important to consider choosing the exact right size of your embed in relation to the rest of the page. 

  1. Make sure the default height doesn't extend beyond the bottom of the page. 
    • This will ensure that users can actually see the navigation controls and Workshop tools (should they switch to edit mode). 
  2. Make sure users can scroll past the 3D Showcase embed. 
    • This is important, as 3D Showcase captures actually scroll wheel events. Consider the following tips to ensure users can scroll past the embed. 
  3. Restrict the size of the embed so it's smaller than a typical browser window. 
  4. Disable scroll wheel events for 3D Showcase. 
  5. Use a lightbox to overlay your 3D Showcase onto the webpage. 

Manually Adjust the Height and Width 

If you copy an embed code from my.matterport.com, the code will create a window that is 853 pixels wide and 480 pixels tall by default. You can, however, adjust the size manually using CSS. 

  1. Adjust the width and height values. 
    • <iframe id="showcase-player" width="853" height="480" src="http://my.matterport.com/show/?m=xxxxxxxxxx" frameborder="0" allowfullscreen allow='vr'></iframe>
    • For the best user experience, we recommend keeping the same proportions - for example, if you set the width to 600 pixels, adjust the height to 340 pixels. 
    • (600/853) x 480 = 340 pixels. 
  2. Use CSS to create size variance. 
    • <iframe id="showcase-player" width="853" height="480" src="http://my.matterport.com/show/?m=xxxxxxxxxx" frameborder="0" allowfullscreen allow='vr' style="width: 100%;"></iframe>

Make 3D Showcase Responsive 

If your website is responsive, you can make 3D Showcase responsive too - follow the instructions below. 

  1. Make the imbed completely fill a <div>. 
  2. Retain the 16:9 aspect ratio for the <div>. 

<html>
  <head>
   <style>
.matterport-showcase iframe{
  min-height: 240px;
  margin: 16px 0;
  width: 100%; }

@media screen and (min-width: 768px) {
.matterport-showcase iframe {
  min-height: 360px; }}

@media screen and (min-width: 992px) {
.matterport-showcase iframe {
  height: 600px;
  max-width: 1068px;
  margin: 0 auto 15px; }}


.matterport-showcase {
  text-align: center;
}
   </style>
  </head>
  <body>
    <div class="matterport-showcase">
     <iframe width='853' height='480' src='https://my.matterport.com/show/?m=9dwWy8VsSw5' frameborder=0 allowfullscreen allow='vr'></iframe>
    </div>
  </body>
</html>

Design for Mobile 

Take some extra considerations to ensure that your webpage looks and acts properly on mobile (smartphones, tablets) in addition to desktop browsers. 

  1. Use the same embed code across all platforms. 
  2. Use CSS and the @media query to change the size of the embed. 
    • This depends on the size of the window. 
  3. Add the "allowfullscreen" and "allow='vr'" parameters in your embed code. 
    • This will allow users to expand the screen and enter VR mode - reference the example code below.

<iframe id="showcase-player" width="853" height="480" src="http://my.matterport.com/show/?m=xxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

If you enable autoplay (&play=1), the full-screen icon my not appear - this is a known issue with certain mobile browsers. Even without the autoplay parameter, certain mobile browsers will not display the full-screen icon in an iframe for Matterport models.

Have more questions? Submit a request