Add Multimedia to a Mattertag™ Post

Introduction

In addition to links to external websites, you can now add multimedia to your Mattertag™ Posts such as:

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

For example, check out this Matterport Space:

 

How to Add Multimedia

First create a Mattertag Post. 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.

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

copy-image-url.png

Return to Workshop. Click the Media textbox 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.

publish.png

 

Supported Formats & Recommendations

For images, we support:

  • JPG and JPEG
  • GIF
  • PNG

The image should already be online somewhere. You can host the image on your website or on:

We can accept images at any size and resolution, but for the best quality we recommend 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 support:

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 audio/video clips because this keeps the overall user experience tight and focused.

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 and we can help you troubleshoot.

 

Test your Multimedia Before Including

You can test your multimedia to debug and make sure it will insert properly within the Mattertag Post. Testing can help, but is not guaranteed to work for all providers.

First open the multimedia that you want to include. For this example, we'll open Google Maps and look around for the UCSF (University of California in San Francisco) Medical Center. We'll click on the label on the map. This drops a red pin and opens the side bar on the left.

You'll also notice that the URL changed. Right click on the URL and then copy it.

ucsf-google-maps.png

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

embedly-explore.png

Right click and then Paste, or press Control+V (Command+V for Macs) and hit enter.

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 will work okay.

Again, while this tool can help you, it 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 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 that it will work for the general public.

 

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