Skip to content

Embeds

There are a few ways to add embeds to body text. A tweet you paste in. On the Embed menu (under the mountain-range icon), there's Video for videos and Responsive Embed for socials and other stuff.

Here is the Embeds menu:

HTML Embed

You can do an HTML Embed in Grove, but it's not a common use case and it's not at all graceful. Let us know in #grove-community if you do this.

Responsive Embed

A Responsive Embed is used for stuff that has embed codes. Instagram, Spotify, TikTok and Threads are all Responsive Embeds. DocumentCloud too; here are the directions. Twitter can be done this way as well.

To add one:

  1. Get the embed code — NOT the link — of the item. Usually this can be had by clicking the Share icon, often a curled arrow or a paper airplane.
  2. Choose Responsive Embed from the embed menu (mountain-range icon).
  3. Click the magnifying glass.
  4. Click NEW RESPONSIVE EMBED button.
  5. Give it a name — this won't be seen anywhere but in Grove.

  6. Paste the embed code where it says Full Html Embed.

    It will look something like this:

  7. If you know you're supposed to set it to Do Not Syndicate? then toggle that to blue.

  8. Click PUBLISH. This does not publish the story — just the embed.
  9. Click < Back.
  10. Click on the embed — it's at the top of the flyout pane.
  11. Click SAVE & CLOSE.

Facebook Reels

If you embed one of these and it takes up the full width of the text well, go into the Responsive Embed and put this in front of the code:

<div style="max-width: 400px; margin-left: auto; margin-right: auto;">

And this at the end of the code:

</div>

Tweet

To add a tweet, get the link to the tweet. Paste it into the body. You can also use URL Embed on the Embed menu, or get the tweet's embed code and follow the instructions for Responsive Embed above. All of it should work.

Adding Videos

Videos can be added from Youtube and JW Player. Uploading a video file directly to Grove is NOT the correct method.

From YouTube

There are four types of YouTube videos: regular, regular with a timecode, live and Reels/Shorts.

Regular

To add a YouTube video, choose Video in the embeds menu (mountain-range icon).
A how-to video is also available here: Video (YouTube)

  1. Click the magnifying glass.
  2. Click NEW VIDEO in the lower left.
  3. Choose YouTube (URL) from the Provider menu.
  4. Paste in the URL under YouTube URL or ID.
  5. Fill in fields as needed. Some will auto-populate. Some you may not need/want.
  6. To add a custom thumbnail, go to the Thumbnail tab and do so.
  7. Click the green PUBLISH button.
  8. Click < Back.
  9. Click the video name at the top of the flyout pane.
  10. To the video in the margin with text wrap, choose Medium from the Size dropdown. If you want it the width of the text, leave it alone. If you want it huge, choose Extra Large.
  11. Click the SAVE & CLOSE button.

NOTE: If at any point it asks you for Metadata, just continue on your way. If it won't let you continue, give it a duration of a millisecond and move on: 00:00:00:001

Timecode

If you want the YouTube to start at a specific time, do this:

  1. Pause the video where you want it to start.
  2. Click Share on the YouTube video. NOT IN GROVE. YOU ARE IN YOUTUBE FOR THIS STEP.
  3. Check the Start at box.
  4. Copy the URL.
  5. GO BACK TO GROVE.
  6. Use this URL to create embed Video in the regular way, as described above! You do NOT have to do a Responsive Embed; there was a Grove update to fix this.

Live

To add a LIVE YouTube video, you need to get its embed code and make a Responsive Embed as detailed under Responsive Embed, above.

Reel/Short

  1. If the Reel or Short doesn't have embed code in the Share button, get the URL and replace "shorts" with "embed."

  2. Take that URL and paste it into this code:

    <div style="max-width: 400px; margin-left: auto; margin-right: auto;"> <iframe width="419" height="744" src="URL" title="TITLE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div>

  3. Add a title as well.

  4. Paste into a Responsive Embed.

If it does have embed code, put it between the divs above and make a Responsive Embed.


Uploading Other Videos

Note that you can't add video files from your computer directly to Grove — they must first be uploaded to JW Player. If you do not have access to JW Player, skip to that subsection below for instructions on working with DCO (onlineproduction@npr.org).


If you have access to JW Player

To add a JW Player video:

  1. Choose Video in the Embeds menu (mountain-range icon).

  2. Select NPR Video as the Provider

  3. Select your clip from the JW Player Media Library. Select the Assets tab and copy the HLS Manifest. (May also be supplied by DCO.)

  4. Paste the HLS Manifest into the HLS URL field and fill the remaining applicable fields. Select the Metadata tab to add the duration which can be found above the video in JW.

Choosing a Thumbnail (HLS Videos):

Note

When adding an HLS video in Grove a thumbnail must be included, otherwise there will be a black screen underneath the play button.

  1. If you already have an image you'd like to use proceed to Step 7. Make sure it is 1920x1080 as this will match the video player resolution.

  2. There are other ways to source thumbnails for this step: using VLC if the video is on your local computer or if the video is available on SnapStream. Each will give you the proper resolution for your thumbnail.

    • Open the video using VLC and pause at the frame you'd like to capture. Go to the video window and select Snapshot (Option+Command+S on Mac - no Windows keystroke). Images captured on Mac and Windows can be found in the Pictures folder with a filename similar to vlcsnap-2024-10-10-10h57m37s357.png.

    • Alternatively, if you are sourcing the video from SnapStream, load the video for playback and pause at the frame you'd like to capture. Click on the camera icon below the video. You can adjust your chosen frame by advancing or rewinding the frame by frames or seconds. Check the box that says "Download Image" and click Create.

  3. Select the Overrides tab to add a thumbnail and click on the magnifying glass icon in the Thumbnail field. When the Select Thumbnail window opens click on New Image in the lower left corner.

  4. New Upload is the default option when uploading a new image. Click on Choose and navigate to the image's location.
    The image will populate the screen once uploaded. Selecting the focal point is not necessary since this image is intended just for this video. However, if the image is to be used in additional stories then set the focal point as it will apply to all image sizes and aspect ratios.

  5. In the Internal Name field, give it a memorable name that you can search easily if needed. Choose the Copyright/Holder. Complete other relevant fields below as necessary. Click Save.

  6. Click back and the Select Thumbnail window will reappear and you should see you new image on the top row.
    If not, click on the red Reset icon and it will reload the list. Select your image and it will populate the Overrides Thumbnail area.

  7. Click Publish, Back and finally Save & Close at the bottom of the Edit Video window. Reload the page to see the added thumbnail and publish.


If you do not have access to JW Player

Work with DCO to upload your file:

  1. Email onlineproduction@npr.org your video to be added to your story. You can send them a link to DropBox, LucidLink, Google Drive, etc.

  2. If you have a thumbnail for your video (the still image in the video player before the video is played), please send that along with the video. If you don't have a thumbnail, please pick a moment from your video as your thumbnail and tell them the timecode for that moment. They will pull the image and create a thumbnail for you.

  3. Receive the HLS URL from DCO by email. The next steps will outline what to do with that HLS URL.

  4. Click on the "+" in Grove and select Video

  5. Select NPR Video as the Provider

  6. Paste the HLS Manifest into the HLS URL field and fill the remaining applicable fields. Select the Metadata tab to add the duration which can be found above the video in JW.

Choosing a Thumbnail (HLS Videos):

Note

When adding an HLS video in Grove a thumbnail must be included, otherwise there will be a black screen underneath the play button.

  1. Select the Overrides tab to add a thumbnail and click on the magnifying glass icon in the Thumbnail field. When the Select Thumbnail window opens click on New Image in the lower left corner.

  2. New Upload is the default option when uploading a new image. Click on Choose and navigate to the image's location.

    The image will populate the screen once uploaded. Selecting the focal point is not necessary since this image is intended just for this video. However, if the image is to be used in additional stories then set the focal point as it will apply to all image sizes and aspect ratios.

  3. In the Internal Name field, give it a memorable name that you can search easily if needed. Choose the Copyright/Holder. Complete other relevant fields below as necessary. Click Save.

  4. Click back and the Select Thumbnail window will reappear and you should see you new image on the top row.
    If not, click on the red Reset icon and it will reload the list. Select your image and it will populate the Overrides Thumbnail area.

  5. Click Publish. Open your story and place the cursor where you'd like the video to go. Click the Embeds icon (mountain-range button) and select Video.

  6. Finally, click Save & Close at the bottom of the Edit Video window. Reload the page to see the added thumbnail and publish.

Containers

Use the Rich Text module. Here's how to add one:

  1. Make sure you already have text. To wrap text around a container, the text has to be there first.
  2. Click into the embeds menu (mountain-range icon).
  3. Choose Module.
  4. Choose Rich Text (using the drop-down that says Ad).
  5. Add your elements — text, images, Promo Links, whatever you need to contain. You'll do this just like you're editing body text anywhere else.
  6. If you want the module in the margin, choose Right Alignment under Enhancement Alignment under Enhancement Styles. Sorry, you can't align it to the left.

PDFs

PDFs are not embeddable directly in Grove. You'll need to use DocumentCloud.