Add Multimedia to a Mattertag™ Post

Introduction

In addition to links to external websites, you can now add multimedia to your Mattertag™ Posts. Multimedia includes:

  • Images
  • Audio
  • Videos, such as from YouTube or Vimeo
  • And much more ...

For example, check out these Matterport Spaces:

 

How to Add Multimedia

First, create and place your Mattertag Post. Learn how.

Add a title and details. Add a link to an external website if desired.

with-just-description.png

Now let's add the multimedia. For this example, we'll add an image of a similar-looking table.

Open another tab or window in your web browser and find the image you'd like to include. For images, right-click and then Open Image in New Tab.

Some images are part of the webpage through the <img> HTML tag. Other images may be part of the webpage through the background-image element in CSS. You may have to inspect the HTML code to find the right image.

open-image-in-another-tab.png

Highlight the URL and then press Control and C keys at the same time (Command + C for Macs) to copy the URL to your computer’s clipboard.

Make sure the URL ends with JPG, PNG, or is one of the other supported formats listed below.

copy-image-url.png

Return to Matterport Workshop. Click the textbox for the Media field and then press Control + V (Command + V for Macs) to paste the URL.

just-media-field.png 

Click Done to save your changes.

 just-done-button.png

Click Publish to make your changes public in 3D Showcase.

publish.png

 

Supported Formats & Recommendations

For images, we support:

  • JPG and JPEG
  • GIF
  • PNG

The image needs to be already online somewhere. This can be on your own website or on:

We can accept images at any size and resolution, but for the best quality we recommenda 4:3, 3:2, or 16:9 ratio.

Users can click the image and the Mattertag Post will expand to fill the entire screen so they can see more of the image.

see-image-at-full-resolution.png

For video, we support:

For audio, we recommend:

Audio and video must be hosted on a third-party provider such as YouTube or SoundCloud. Upload to that provider and then use that link. We cannot directly add audio or visual files you host on your own website, such as MP3, WAV, MP4, MPEG, etc.

In general, we suggest using short and focused audio-video clips. This keeps the overall user experience tight, focused, and not distracting.

Finally, we also support many more multimedia such Google Maps, Polls, PDFs, and more! For a full list please check embed.ly/providers. Some providers such as LinkedIn and Amazon may not work. Please let us know if a provider does not work.

 

Test your Multimedia Before Including

You can test your multimedia to make sure it will insert properly within the Mattertag Post.

Testing can help you debug links. However, this method will not work for all providers.

First open the multimedia that you want to include.

For this example, we’re opening Google Maps at maps.google.com. Next we’ll find UCSF (University of California in San Francisco) Medical Center and click on it. This will open the sidebar on the left.

Now we’ll right-click on the URL and copy it to the computer’s clipboard.

ucsf-google-maps.png

Next we’ll open a new browser tab and go to http://embed.ly/docs/explore/oembed.

embedly-explore.png

Pase the URL from your clipboard and hit Enter. For the UCSF Medical Center, the URL is:

https://www.google.com/maps/place/UCSF+Medical+Center+at+Mission+Bay/@37.7587301,-122.403222,14z/data=!4m5!3m4!1s0x0:0xac75b64b173d6a7b!8m2!3d37.7679499!4d-122.3922122

embedly-docs-explore.png

Most of the information here is only for software engineers. However, look at the html row at the very end. The visual on the right is what will be added in the Mattertag Post.

In this case, the iframe is working properly. That is, we can move around the map and zoom in/out. Therefore, the link and the embed is working okay.

Again, while embed.ly/docs/explore/oembed can help you debug a media link, this tool cannot guarantee that it will properly include in a Mattertag Post.

First, the output may be slightly different. For example, the centering in Google Maps may be a little off.

Second, providers such as LinkedIn & Amazon may work in the tool, but will not work at all in a Mattertag Post. Contact us if a provider will not include properly in a Mattertag Post.

 

Common Media URL Issues

When you add multimedia, you are linking out to external content on the internet.

You are not uploading content to Matterport servers.

Therefore, you might have issues with the external media URL. Here’s some common problems and how to fix them.

 

The URL contains a typo or the media does not exist

If there’s a typo in the URL, then no media will display. Similarly, if the picture is available today but someone takes it off tomorrow then it will not be displayed.

Simply visit the media you wish to include and then copy the URL from your web browser’s address bar. Open a private or incognito window in your web browser and then paste the URL to test it.

 

The URL leads to a HTML page or unsupported media

If the media links to an HTML page such as https://www.amazon.com/ that has lots of media, or the media is not one of the supported types above, then nothing will display in the Mattertag Post.

 

The URL leads to private or non-shared content

Your media may exist, but you have set it to be private. For example, for YouTube videos make sure you set the video as either Public or Unlisted.

make-youtube-video-public-or-unlisted.png

 

The URL leads to a restricted domain

In rare cases, the entire web domain may be restricted (require a username and password to login). Because Workshop cannot access the media, nothing will be display in the Mattertag Post.

Again, try pasting the media URL into a private or incognito browser window to confirm that it is restricted.

Have more questions? Submit a request