Data: Media Embed

The MediaEmbed data component is for embedding a media element, such as a YouTube video or Google Calendar into a page. The elements on the page are:

  • Title [Required]: Title of the Media Element, this only appears in the code
  • Description [Required]: Short version describing the element, this is used in the same way that the Alt Tag is used for images.
  • Cut Line: This optional element appears below the media element, like a caption for a photo.
  • Data Source [Required]: This is the source of the Media to embed. See below for proper formatting of this element.
  • Width/Height: Specify the Width and Height of the element as you wish it to render on the screen.
  • Placement [Required]: You can specify that this element appears above, below or to the right of the body copy on the page.
  • Div Style: Add additional CSS to this area that will be applied to the DIV that wraps around the media element, such as background-color, etc.

Data Source

Several different DataSources can be supplied as an external link. Others than the ones shown below MAY work but may not. Contact Kevin if you have an additional type that you would like to specify.

YouTube

View the video on YouTube and get the Video ID from the URL (such as "http://www.youtube.com/watch?v=bwzN0VOvpXo"). Then put in the link to the video like this, replacing the last part of the link with the video ID from your link:

  • http://www.youtube.com/v/bwzN0VOvpXo

Flickr Slide Show

View the set in Flickr and copy the URL for the slideshow (such as "http://www.flickr.com/photos/unrphotos/sets/72157627799521855"). Then paste that link into the data source field exactly like this (make sure there is no trailing slash, etc):

  • http://www.flickr.com/photos/unrsota/sets/72157628945161045

Google Calendar

First, follow the "Sharing Google Calendar" instructions from Google (the calendar must be made public before it can be shared). Then go to the Calendar Settings -> Calendar Details page, select the code that is shown in the "Embed this calendar" section, which will look something like this:

iframe src="https://www.google.com/calendar/embed?src=be1flvjjsep9a4hop5ul099tog%40group.calendar.google.com&ctz=America/Los_Angeles " style="border: 0" width="800" height="600" frameborder="0" scrolling="no"

Then copy out the link specified in the "src" area and paste the entire link into the Data Source.

  • https://www.google.com/calendar/embed?src=be1flvjjsep9a4hop5ul099tog%40group.calendar.google.com&ctz=America/Los_Angeles

Data Media Embed Editor