Embed videos

Embedding videos helps readers who prefer to learn by watching rather than reading. It also adds some visual pizzazz to the docs, and can be an easier way to explain complex processes.

For tips on creating videos, see Create video.

Videos are hosted externally and are embedded in the doc site's page, linking to the external source.

New Relic maintains video in several places, but you can only embed Wistia and YouTube videos in our docs:

• Wistia
• YouTube
• New Relic Webinars (Use for live videos—not embeddable)
• Twitch (Use for live and video on demand—not embeddable)

Before you add the video

Write introductory text above the embedded video or add a video caption after it. Include the approximate running time in your text, because some video formats will not show the video length until you click on them.

Wistia

Besides the docs site, Wistia hosts videos for learn.newrelic.com. Wistia is a good place to host videos you create as a writer, as well as videos we receive from other teams.

All writers should have admin-level access to Wistia so that they can upload, manage, and track the performance of videos. If an internal contributor wants to add a video, our team will upload and manage it on their behalf. We do not want to provide contributor access to Wistia to those outside of our team.

To upload videos to Wistia:

1. Go to Wistia.com, type newrelic, and click Continue with SSO.

2. Click Content library > Content and click docs.newrelic.com Videos.

3. Click Add > Upload.

4. Click Embed & Share.

5. Copy the video ID from the embed code so you can insert it into your video link. For example, jsh48c18dq from this tag:

   <script src="https://fast.wistia.com/embed/medias/jsh48c18dq.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:216.88% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_jsh48c18dq videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/jsh48c18dq/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

   Copy

6. Insert the ID into the video tag in your document. Note that you can also add properties to control the video (see Sizing videos).

   <Video
     type="wistia"
     id=”jsh48c18dq"
   />

   Copy

<iframe
  width="560"
  height="315"
  src="https://fast.wistia.net/embed/iframe/<INSERT_VIDEO_ID_HERE>"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

YouTube

You have two options to embed videos from YouTube: the <iframe> tag or our <Video> component.

Use iframe tag from YouTube

Use the embed code that you can find on the YouTube site:

1. Go to the YouTube and find the video you want to embed.

2. Click Share and then click Embed.

3. Copy the entire <iframe> tag. For example:

   <iframe width="560" height="315" src="https://www.youtube.com/embed/04JP0ky_hjI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

   Copy

4. Paste that tag into your document.

Here's how it is displayed:

Use our Video component

You can use the Video component in the same way you use it for videos hosted on Wistia. Copy the video ID from YouTube and insert it into the Video component. Note that you can also add properties to control the video (see Sizing videos).

Here's an example without any additional properties:

<Video
  type="youtube"
  id="04JP0ky_hjI"
/>

Here's how it is displayed:

Sizing videos

When you use the <Video> component you can add properties to control how it is displayed.

Width

You can only set width—not height. Here's an example:

<Video
  type="wistia"
  id="04JP0ky_hjI"
  width='400px'
/>

Aspect ratio

If you have some videos that are much smaller than the width of the main body, they can appear as tiny videos in the center of a full-width video box. To address this, you can do the following:

• Add the vertical property of the component because it shrinks the container to the width of the video.
• To size tall, skinny companion images that need to match the narrow videos, use maxWidth instead of width. For example: style={{ maxWidth: '290px' }}.

Here's an example of the vertical property:

<Video
  type="wistia"
  id="qyk74p7j56"
  vertical
  width='290px'
/>

Here's how it is displayed: