How to add or embed a video within your website


Videos can be embedded into the body area of content.


YouTube and more

If you are using YouTube, Flickr, QIK, Revision3, Scribd, SmugMug, SoundCloud, Twitter, Viddler, and Vimeo, you can wrap the URL or "share" the URL with the embed tags.

  1. Find the Share link on the video. It may have different icons, such as one of these examples:

    share icon  or  share link example
     
  2. Copy the link that is shown.

    share link example
     
  3. Paste the link to the video into the code of your Drupal page with the Embed tags in square brackets, as in the example below.

Example of embed code inserted of YouTube video "Time-lapse of fall colors at Princeton"

[embed]https://youtu.be/uLG5Coswx1Q[/embed]


Notes:

If you are having trouble with just the link appearing and not the video, check to see if the URL is https -- change it to http to fix the trouble.

If you do not want related videos to pop up at the end of the video, add ?rel=0 to the end of the URL (before the closing [/embed] tag)

You can also manually change the size of the player. To adjust the size of the player, change the size pulled in with the embed code. For example, for a video with a base size of 608x402 you can manually edit the size to 275x155 in pages with a left panel and two body columns. When in doubt use an aspect ratio calculator to help. Example:

example of an embed code


Media Central

Publish the videos to Media Central

From Media Central, copy the embed code for the video and paste it into the body of your Drupal web page. Note that an oEmbed URL in Media Central is the same as its video page URL, but with "id" replacing "media" in the URL.

To copy the embed code:

  1. Click on the Share tab
  2. Click Embed
  3. Copy the code in the Embed Code field.
  4. Paste the embed code into the body of your Drupal web page.
  5. Surround the URL with the embed shortcode: [embed]hyperlink[/embed]
  6. Make sure you are using square brackets, and that the oEmbed code is on its own line.

The following example is source code to a video on Media Central, which explains how to get the embed code for the video.

Example:

[embed]http://mediacentral.princeton.edu/id/1_b024qge9[/embed]