Follow

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

 

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 Wufoo 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.

Embed_code.png

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 HTML button.

 
5. Paste your embed code into the window that pops up and click OK. The video will now display in your News item.
 
NOTE - You will still need to add text to the body of the article before the "Publish" action will be enabled. 
 
6. Click Publish in the Action Bar at the top
 
 

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.

embed00.png

 2. In Preview mode, click Pop-Out.

embed01.png

3. In Pop-Out mode, click Embed item.

embed02.png

4. Copy the embed code.

embed03b.png

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 and click OK.

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

embed04.png

 

embed05.png

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 > PrivacyScroll 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.

Vimeo_Embed_html_d232ca4a.png 

 3. Navigate to the Embed section at the bottom:

 Vimeo_Embed_html_18065db7.png

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. 

208404626.png

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. vimeo_private_body.jpg

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 

vidyard_share_button2.png

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.

vidyardiframe02.png

 

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

 

208404626.png

 

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

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:

1. Navigate to the News item in question. Click to open it into view mode.

2. Click on the blue Edit near the top. If you will only see this if you have edit rights.

3. In the top right corner of the Body section, click </> Show.
 
 
4. Find the embed code for the video in the HTML code and edit the width and height parameters as you see fit. 560 and 315 are reasonable choices. When finished, click </> Hide.

5. Click Preview in the Action Bar at the top to confirm you now have a suitable size. 

6. Click Publish in the Action Bar to lock in your new video frame size.
 

 6. News tile images for embedded content

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!

embedaudio2.png

 

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.

GoogleForms01b.png

 

5. 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.

GoogleForms03.PNG

 

9. 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.

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

5 Comments

  • 0
    Avatar
    Brad Palmer

    Hi,

    I've added a new article detailing how Vimeo videos can be embedded in Jostle: 

    Embedding Restricted Vimeo Videos in News.

    Thanks!

  • 0
    Avatar
    Tasneem Zeghmi

    Hi, 

    Is there a way to be able to upload videos directly on our company news? We want the users to be able to view them without having to open a separate page for it. Is this something Jostle offers? 

  • 0
    Avatar
    Brad Palmer

    Tasneem today there is a way to do it, but it requires a bit of a workaround. First you need to put the video in LIBRARY. Details are in this article: https://forum.jostle.me/hc/en-us/articles/208404716-Embedding-LIBRARY-Videos-in-NEWS

    We do plan to improve the handling of video in NEWS, but this is not in active development yet.

    Brad

  • 0
    Avatar
    Hayley Alexander

    Hi Brad, Hope you're well. Appreciate that uploading video is a work in progress, but it would be great to understand some approximate timings for when you would are expecting this to be available as this is a key medium our team are using. Thanks

  • 0
    Avatar
    Brad Palmer

    Hayley,

    We have some good improvements to the embedding of videos in QA now and should be available in ~3 weeks. Next we are working on better uploading of video so that it is faster and can deal with large files. That is in progress but is a bit further out as a number of pieces need to come together. Once we have that working we will be pushing to get direct uploads of video in Activity and News.

    Thanks for your patience while we build this out,

    Bruce

Please sign in to leave a comment.