Place & Resize your Embed

Place Above the Fold

Make sure 3D Showcase is above the fold in your webpage. This is to increase engagement  less people will see and interact if you put it lower on the page.

Generally, visitors stay longer on the page when something interactive or playable can be seen immediately when a page has been loaded.


Not Too Big

While seeing 3D Showcase in a very large size increases the feeling of immersion, you have to make sure that you're choosing the right size.

Make sure the default height doesn’t extend beyond the bottom of the page. Otherwise users can't see the navigation controls.

Make sure it's possible to scroll past the 3D Showcase embed. This is because 3D Showcase captures scroll wheel events. There's several ways to make sure users can scroll past the embed:

  • Restricting the size of the embed so it's smaller than a typical browser window
  • Disable scroll wheel events for 3D Showcase (add the &wh=0 URL parameter)
  • Use a lightbox to overlay 3D Showcase on the webpage


Manually Adjusting the Height and Width

The embed code you copy from comes with a standard size of 853 pixels wide and 480 pixels tall. You can adjust the size manually or with CSS.

First, you can manually adjust the width and height values.

<iframe id="showcase-player" width="853" height="480" src="" frameborder="0" allowfullscreen allow='vr'></iframe>

For the best user experience, keep 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. 

Second, you can also use CSS to vary the size of the embed.

<iframe id="showcase-player" width="853" height="480" src="" frameborder="0" allowfullscreen allow='vr' style="width: 100%;"></iframe>


Responsive Sizing

If your website is responsive, you can make 3D Showcase responsive too.

One way to do this is to make the embed completely fill a <div> and then retain the 16:9 aspect ratio for that <div>.

.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;
    <div class="matterport-showcase">
     <iframe width='853' height='480' src='' frameborder=0 allowfullscreen allow='vr'></iframe>


Designing for Mobile

There are some extra considerations to remember to make sure your webpage looks and acts well on mobile (smartphones) in addition to desktop browsers.

First, in terms of sizing it's best to use the same embed code across all platforms. Then use CSS and the @media query to change the size of the embed depending on the size of the window. See example code above.

Second, remember to add the allowfullscreen and allow='vr' parameters in your embed code. This is so users can enter VR mode.

<iframe id="showcase-player" width="853" height="480" src="" frameborder="0" allowfullscreen></iframe>

Note: if you enable autoplay (&play=1), the full-screen icon may not appear. This is a known issue with some mobile browsers. Even without the autoplay parameter, some mobile browsers will not display the full-screen icon in an iframe for Matterport models. 

Have more questions? Submit a request