Audio, video and tweets in an article

How can I embed videos from Youtube and Vimeo? How can I add audios from Soundcloud or Mixcloud into articles? How can I quote from Twitter and embed a tweet?

We have decided not to host audio and video files on our own servers but to let external services such as Youtube & Co do this for us. The advantage is that audios and videos can be found on these sites as well, and thus can be embedded by others.

In order to Embed audio or video documents you will, first of all, need  a link to the file. You can find it in your browser's address line.

This is what it looks like on YouTube:

It is important to use only this part of the link as many Youtube links look like this:

If so, take only the first part. That means: Use everything in front of the &.  Like this:

This is what it looks like on SoundCloud:

Embedding of external media

Whenever you want to embed an external media file, you will have to copy the link  (Strg + C) and then to click on Assets & Media (under the article body) in the article form.

There are two options:

  • Files
  • External Media

In External Media you can now paste the link (Strg + V) and choose the media platform:

Now please move your cursor to the place in the Body where the video is to be shown and click once. Go back to External Media and click on Insert into Editor.

The audio/video file is now embedded and you can see the embed-link in square brackets:

This is only the backend (Edit) view. In the frontend, which is how users see the pages, the media itself will be shown:

Embedding a tweet

From July 2016 on you can also embed tweets in your articles and this way quote any tweet from Twitter. The result looks like this:

It works as for YouTube and SoundCloud, so:

  • open the Twitter-timeline, click on the tweet and copy its URL (CTRL + C)
  • open the section Assets & Media - External media in you article form
  • copy the link into the URL-line
  • choose Twitter from the pull down list to let the system know that it is about a tweet
  • place your cursor in an empty line in the text editor, at the place where the tweet is supposed to shop up
  • scroll back down and click on "Insert into editor"

You can also embed media files in your teaser. This option is often used for galleries embedded from Flickr.

  • This is the only way to embed media and to automatically render them in the correct size, no matter whether it is shown on your (big) desktop computer or on a smartphone.
  • Though you can also embed media files directly on landingpages, it is better to always write an article text about the media context. This is how media will be better found by seach engines.
  • It is very useful to always tag embedded media "video", "audio" or "gallery". This is how you can later create a list showing all audios, videos etc.