Instructions for Common Content Tasks: Configuring Video Links

A Drupal CMS Guide for Marketers

Getting Started

At some point, you may want to add a video to the body of one of your website’s pages. Before you can configure the in-line video, there are a couple of steps you need to take:

  1. First, upload your video to an external video-hosting website like YouTube or Vimeo.
  2. Second, add an in-line image to the Body field that will link to the video. You’ll want to use an image that makes it clear that if a visitor clicks on it, they will open up a video, such as a screenshot from the video with a play button icon superimposed over it.

Note: To add the in-line image, follow the instructions in the Configuring Images blog post.

After you’ve uploaded your video to an external website and added an in-line image to the Body field, you now have to attach a link to the video to your in-line image.

Attaching a Link to Your Video

  1. Double-click on the image to open the Image Properties window.
  2. Click on the Link tab.
  3. Open a new browser window/tab and go to the page where your video is hosted.

If Your Video is Hosted on YouTube

  1. Mouse beneath the video player and click the Share tab.
  2. On the Share tab, click the Embed subtab. You’ll see a textbox with some HTML code. Copy that section of code. This is the embed code for your in-line video.
  3. Go back to the page you’re editing on your website, where the Image Properties window should still be open to the Link tab.
  4. In the URL field, paste the embed code for your video.

Drupal CMS YouTube Exampls

If Your Video is Hosted on Vimeo

  1. Mouse over the Video Player, and click the Share button that appears.
  2. In the Share This Video window that opens, you’ll see an Embed textbox. Select the code in the textbox and paste it into a text document.
  3. In the text document, select the following section of the embed code: //player.vimeo.com/video/[your video’s number]?
  4. Copy that section of code. This is the embed code for to your in-line video.
  5. Go back to the page you’re editing on your website, where the Image Properties window should still be open to the Link tab.
  6. In the URL field, paste the embed code for your video.

NOTE: Make sure you include the ‘?’ at the end of the URL.

Drupal CMS Vimeo Example

At this point you can save your page and when someone clicks on the image a new tab will open and play the video. Sometimes, though, you may prefer to have your video appear in a pop-up window over your content instead. This effect is called a LightBox or a Colorbox.

To Set Your In-Line Video to Open in a Colorbox:

  1. Right-click on the image that links to the video and select Edit Link from the menu.
  2. The Link window will open, displaying the embed code for your video in the URL field.
  3. Go to the Advanced tab in the Link window.
  4. In the Stylesheet Classes text box, type the following: colorbox-youtube
  5. Click the OK button to get back to the main editing window.
  6. Click the Save button to save your changes. When you click on the preview image, your video should now appear in a pop-up window above your content.

For more how-to guides on Drupal tasks, check out the other posts in our blog series, Instructions for Common Content Tasks