FAQ: How do I embed a video in a Drupal page?

Drupal supports several types of video or movie files. This FAQ addresses how to embed QuickTime and Flash file types. Some of the information presented here is borrowed from the W3CSchools.com web multimedia tutorial.

Upload the file

From the edit mode of a page in your site, select some text and click the Insert/edit linkbutton.

Click the icon to the right of the Link URL field to open the file manager and access the site's media assets directory.

Click the Upload button (located in the upper right). This opens another window. In this new window, click the Browse button. Locate and select the file you want to upload and click the Open button. Finally, click the Upload button. A message appears in the window telling you whether the upload was successful. Close the Upload window.

Embed .mov (QuickTime) movies

Select the newly uploaded file by clicking the checkbox next to the file name and then click the Insert link (located in the lower left). This closes the file manager and takes you back to the Insert/edit link window, where the Link URL field is now filled in with the path to the file you selected. Copy the contents of this field and then click the Cancel button.

Click the HTML button (last button in top row of tools) and set your cursor in the screen at the location you want the video window to appear. Enter/Return to start a new, blank line and paste the file path information.

Next, copy the code below and paste it below the file path.

<object width="160" height="144"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sample.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">

<embed src="sample.mov" width="160" height="144"
autoplay="true" controller="false"
pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>

Starting at the top line of this code, adjust the width and height values to match your file's width and height. The values are in pixels.

In the line

<param name="src" value="sample.mov">

replace sample.mov with the path to your movie file. (Cut the path from the code you pasted earlier and paste it in place of sample.mov, leaving the quotes in place.)

Adjust the true and false values of the autoplay and controller params to suit your preferences about playing the movie automatically and including control buttons for operating the movie.

In the line

<embed src="sample.mov" width="160" height="144"

replace sample.mov with the path to your movie file as above. Also, adjust the width and height values to match your movie's width and height.

Finally, change the true and false values of the autoplay and controller attributes. These actions seem redundant, but the two different elements (object/param and embed) account for browser differences.

Click the Update button. Note: The video display does not appear in the body while in the edit mode of the page. Save the page to see the video display.

Embed .swf (Flash) movies

Next, copy the code below and paste it below the file path.

<object width="400" height="40"<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
<param name="src" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

Starting at the top line of this code, adjust the width and heightvalues to match your file's width and height. The values are in pixels.

In the line

<param name="src" value="bookmark.swf">

replace bookmark.swf with the path to your Flash file. (Cut the path from the code you pasted earlier and paste it in place of bookmark.swf, leaving the quotes in place.)

In the line

<embed src="bookmark.swf" width="400" height="40"></embed>

replace bookmark.swf with the path to your Flash file, as above and adjust the width and height values to match your file's width and height. These actions seem redundant, but the two different elements (object/param and embed) account for browser differences.

Click the Update button. Note: The Flash video does not display in the body while in the edit mode of the page. Save the page to see the video display.