Embedding Audio or Video

This lesson shows you how to embed audio or video players into a web page.

We do not store audio or video files on the SF State Drupal servers so you will have to post your content on a media hosting site.

 

In Drupal 7, you can embed YouTube and Vimeo videos easily by clicking on the Youtube or Vimeo icons (Youtube/Vimeo icons) in the CKeditor and entering the video Id.

 

For other videos and for Drupal 6, please follow the instructions below.

 

Embed media

  1. You need to change the input format to Full Html
  2. Click inside the Web Page Body field where you want the player to appear.
  3. Switch to plain text editor by clicking on the Source button on top of CkEditor or by clicking on teh Switch to plain text editor link at the bottom of CKeditor
  4. Copy the embed code of your media into editor.
  5. Save the page.

Get the embed code from the hosting site

YouTube

  1. Go the video you want to embed on the YouTube site.
  2. Click the Embed button directly under the video.
  3. This will open a small box with the code. I will look something like this:Screen shot of embed code on YouTube
  4. Copy the text inside the box.
  5. If you don't see an Embed button, right click on the video and select Copy embed html from the menu.

Vimeo

  1. Go the video you want to embed on the Vimeo site. 
  2. Click the </> Embed button on the right hand side of the video.
  3. This will open a small box with the code. I will look something like this:Screen shot of embed code on Vimeo
  4. Copy the text inside the box.

 

SoundCloud

  1. Go the audio you want to embed on the SoundCloud site. 
  2. Click the Share button at the top of the player.
  3. This will open a small box with the code. It will look something like this: Screen shot of Soundcloud embed code
  4. Copy the text inside the Embed Code box.

 

Podomatic

  1. Go the audio you want to embed on the Podomatic site. 
  2. Click the Embed button to the side of the player.
  3. This will open a small box with the code. It will look something like this: Screen shot of Podomatic embed code
  4. Copy the text inside the Embed Code box.