Embedding external video, audio, and forms in News items (for Reporters and Editors)

**NOTE—the workflows in this article relate to the retired classic editor for News. With the current block editor, embeddable content can be added via the Embed block**

Introduction

You can embed video and audio files into News items from a variety of external sources (for embedding video and audio files from your Library, see here). Below are the instructions on how to do this from the hosting/streaming services currently supported by Jostle. In order to post external videos or audio files in News, you will need to host them on one of the services listed below and then use its embed code (string of HTML characters that you paste into the Body of your News item).

TIP: It would be a good idea to begin by creating your new Article in News first. Give it a title and then click "Save Draft" before following any of the steps below.

Table of contents

1. Embedding YouTube videos
2. Embedding Google Drive videos
3. Embedding restricted Vimeo videos
4. Embedding Vidyard videos
5. Adjusting the display size of an embedded video
6. News tile images for embedded content
7. Embedding audio files
8. Embedding Google Forms
9. Embedding Microsoft Forms
10. Embedding Wufoo Forms
11. Embedding Survey Monkey Forms

1. Embedding YouTube videos

If your video can be viewed publicly, then YouTube is a good choice for hosting it. If you need your video to be private, you will want to choose one of the other hosting options listed below. Here are the steps for embedding a video via YouTube:

1.Upload your video to YouTube. 

2. When viewing your video in YouTube, click Share and then Embed. This will display the HTML code you need. Copy it.

3. Open your saved News Article draft (NEWS > Managed > Draft). 

4. Place your cursor where you want the video to appear in the Body of the News Item. From the toolbar above, click on the Embed icon.

2. Embedding Google Drive videos

Here is how to embed a video that is hosted in Google Drive. (Note that this is the preferred embed method if you have a Google-integrated Library). Follow these steps:

1. In Google Drive, right click and Preview your video.

 2. In Preview mode, click the Action Menu icon (three dots) at the top of the screen and select Open in new window.

3. In the new window, click the Action Menu icon at the top of the screen again and select Embed item.

4. From the Embed item pop-up window, copy the embed code that appears in the text field.

5. Open your saved News Article draft (News > Managed > Draft). 

6. In the Body section, place your cursor where you want the video (you can have text above and/or below it) and click the </> Embed button.

7. Paste the embed code from above in the top field of the window (if the width and height measurements in the code are "640" and "480", edit them to "512" and "384" to better fit to the video in the article).

8. Click Continue to embed the video.

NOTE - You will still need to add text to the body of the article before the "Publish" action will be enabled. 

3. Embedding restricted Vimeo videos

In Vimeo you can host public or restricted videos.

How to make a Vimeo video private

1. Upload your video to Vimeo.

2. Navigate to Video Settings > Privacy. Scroll down to the section titled “Where can this video be embedded?”. Select "Anywhere" or choose your own sites and add Jostle if you have a paid subscription.

3. Under "Who can watch this video?" select "Only people with a password"; this makes your video private and you will need to share this password with those that you would like to be able to view your video. You can also select "Only people with the private link" if you have a paid subscription.

How to embed a Vimeo video

This works with both pubic and private Vimeo videos.

1. Navigate to your video in Vimeo.

2. Hovering over the video to reveal the Share button. Click it.

 3. Navigate to the Embed section at the bottom:

4. Copy the “Embed” text, which will be similar to:

<iframe src=”//player.vimeo.com/video/1234567” width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

5. Open your saved News Article draft (News > Managed > Draft) and paste this text into the Body using the </> Embed function. 

6. If the video is private, it will show that it is not playable in the body of the article while editing, this will go away once the article has been published. 

Now your video will be included in your article!

4. Embedding Vidyard videos

1. In Vidyard, go to the Vidyard player you want to embed.

2. Click Share 

3. On the Embed and Social tab, under Inline embedding click the checkbox next to "Trouble embedding? Click here for fallback iframe code."

4. Copy the iframe code from the field above the checkbox.

5.Open your saved News Article draft (News > Managed > Draft) and click the Embed icon above the Body.

6. Paste the Vidyard code in the upper field. It should look similar to this (without the extra spaces):

< iframe class="vidyard_iframe" src="// play.vidyard.com/YourVideoCode.html? v=3.1.1"></iframe >

7. You will now need to change the size of the player, so copy the following code:

 “style=”width:100%;height:500px;”

and paste it into your embedded code, right after <iframe class="vidyard_iframe" so it looks like this:

< iframe class="vidyard_iframe" style="width:100%;height:500px" src="// play.vidyard.com/YourVideoCode.html? v=3.1.1"></iframe >

8. Click Update Preview and the video should appear at full size the Preview window.

9. Click Ok to return to the New Article form and finish the rest of your News Article.

5. Adjusting the display size of an embedded video

NOTE—embedded videos sized at 560x315 no longer need to be resized in order to be properly displayed in an article.

If you want to change the size a video is displaying in a News item you need to edit its HTML embed code. Here's how:

Embedded videos such as from Youtube, Google Drive and Vimeo will produce a preview friendly image for the tile image in News.

However, embedded videos from Library, or videos hosted on other services outside of the ones listed above, may not create a proper preview image for the tile and will show the underlying HTML content as seen below.

You can fix this by adding a header image into the News item. If you would like to show the video in the tile image, you can screenshot and crop the image of the video and upload it as the header image.

This will create a proper tile image for the video in the News view.

7. Embedding audio files

The News view allows you to share a variety of rich content, including audio files! Perhaps someone in your organization was recently featured in a podcast and you want to share this in an Article.  There are a couple of ways you can go about incorporating audio files, see options below:

Hosting an audio file in Library

1. Upload your audio file to a Library Volume with suitable viewing permissions.

2. Hover over this file in Library and click on View. From the window where the video is open, copy your browser's full URL (something like https://platform.jostle.us/jostle-prod/pages/viewLibraryFile.html?id=12345)

3. Go to your News item, highlight the Body text that you want to link to, and click on the Create Link icon.

4. Paste in your link and click OK.

When people click on this link the audio file will open in Library for them to listen to.

Embedding an audio file in Library (to be played directly from the article)

1. Upload your audio file to Library.

2. Hover your mouse over your newly uploaded file and select View.

3. From the window where the file is open, copy your browser's full URL (something like https://platform.jostle.us/jostle-prod/pages/viewLibraryFile.html?id=12345)

4. Navigate to News > Add Item and select the kind of Item you want to embed the audio file in.

5. Within the Body section, click the </> Embed icon and enter in this text, replacing Your-Audio-URL-Here with the URL you copied in Step 3:

<iframe src="Your-Audio-URL-Here" width="512" height="384"></iframe>

6. Click OK to insert the audio clip into the News item. Note that you can add text above or below this.

7. Click Publish in the Action Bar at the top.

Hosting an audio file in Soundcloud

1. Subscribe to a social sound platform service such as Soundcloud.com (enabling you to upload and share your sound files - similar to YouTube for videos)

2. Upload your audio file to Soundcloud. When done, click Share and copy the 'Widget code' under Embed (this is a string of HTML characters).

3. Add the embed code into the Body of a News item by clicking on the </> Embed button, pasting in the code and clicking OK.

And you will have something that looks like this!

8. Embedding Google Forms

For Google-integrated users, if you've made an order form, survey, or something similar using Google Forms, they can be embedded into a News Article pretty much the same way as videos. Here's how:

1. After you have created your form in Google Forms, click the Send button in the upper right corner.

2. On the Send form, click on the embed code icon (<>)

3. Adjust the measurements below the embed code so they read "Width 500px" and "Height 500 px"

4. Click COPY in the lower right corner.

5. In your Jostle platform, open your New Article form and place your cursor in the body where you want your form to appear.

6. Click the Embed icon (</>) above the body and paste your embed code in the upper field.

7. Click "Update Preview" and if everything is fine, click the "Ok" button

8. Your form should now be embedded in the your Article. Click "Preview" from the Action Bar to see how it will look when published.

9. Embedding Microsoft Forms

You can embed Microsoft Office forms as follows:

1. Go to Microsoft Office > Forms

2. Select the form you want to embed

3. On the form, click the Send button in the upper right corner

4. Click the Embed icon (</>) and copy the code

5. In your Jostle platform, open your New Article form and place your cursor in the body.

6. Click the Embed icon (</>) above the body and paste your embed code in the upper field. Adjust the parameters to 500px x 500px, if needed).

7. Click "Update Preview" and if everything is fine, click the "Ok" button

8. Your form should now be embedded. Click "Preview" to see how it will look when published.

10. Embedding Wufoo Forms

If you use Wufoo forms, you can embed them as follows:

1. Log in to Wufoo and go to Forms

2. To the right of the form you want to embed, click "Share"

3. Select "Embed with iframe"

4. Click "Copy Code" (make sure the parameters are set at 500px x 500px)

5. Open your New Article form and place your cursor in the body.

6. Click the Embed icon (</>) above the body and paste your embed code in the upper field.

7. Click "Update Preview" and if everything is fine, click the "Ok" button

8. Your form should now be embedded. Click "Preview" to see how it will look when published.

11. Embedding Survey Monkey Forms

With Survey Monkey forms, you'll need to manually add iframe tags around their URLs yourself.

1. When you've finished your survey go to Collect Responses > Website 

2. Copy the URL from the text field

3. Place the URL where SURVEY_URL appears within the following tags: <iframe src="SURVEY_URL" style="height:600px;width:600px"></iframe> 

4. You should now have an embed code that looks something like: <iframe src="https://www.surveymonkey.com/r/ZZCMYPP" style="height:600px;width:600px"></iframe> (you can also tweak the height and width if you want it smaller)

5. Open your New Article form and place your cursor in the body.

6. Click the Embed icon (</>) above the body and paste your embed code in the upper field.

7. Click "Update Preview" and if everything is fine, click the "Ok" button

8. Your form should now be embedded. Make any adjustments (centering, etc.) then click "Preview" to see how it will look when published.