How to Add Video to Products in Magento

Here’s the sequence of steps we’re going to take:

1. Create a product attribute for the video code
2. Assign the newly created attribute to an attribute set
3. Modify the template files
4. Obtain and upload a copy of the free JWPlayer
5. Add video to a product using HTML embed code or using an FLV file

1. Create a product attribute for the video code.
Log in to your Magento Admin Panel. Navigate to Catalog > Attributes > Manage Attributes. Click on the “Add New Attribute” button found close to the top-right hand corner of the screen. The first tab that’s open is the *Properties* tab. You are presented with lots of textboxes and dropdowns. Here’s what to fill them in with (you can also view this screenshot):

Attribute Properties
- Attribute Code: video
 - Catalog Input Type of Store Owner: Text Area
Frontend Properties
- Allow HTML-tags on Front-end: Yes

Then navigate to the *Manage Label / Options* tab. You only have to fill in the “Admin” value, and for this use “Video“. This can be changed later if you need to.
Click the “Save Attribute” button to save the attribute.


2. Assign the newly created attribute to an attribute set (likely Default)
While still in the Admin Panel, navigate to Catalog > Attributes > Manage Attribute Sets. From the right-hand column, labeled “Unassigned Attributes”, drag our new video attribute to the “General” group found in the middle column.
Click “Save Attribute Set” button to save the attribute set.

3. Modify the template files
You’ll need to use a text-editor and FTP client.

3a. video.phtml
Create a file with these contents:

<?php

$_product = $this->getProduct();

?>

<?php if( $video = $_product->getVideo() ){ ?>

<h2>Product Video</h2>

<div class="products">

<?php if( file_exists( getcwd() .'/skin/frontend/[your-package]/[your-theme]/videos/'. $video ) ){ ?>

<div id="mediaspace">&nbsp;</div>

<script>

jQuery( document ).ready( function(){

jQuery.getScript( '<?php echo $this->getSkinUrl('videos/mediaplayer/swfobject.js'); ?>', function(){

var so = new SWFObject('/skin/frontend/[your-package]/[your-theme]/videos/mediaplayer/player.swf','ply','470','320','9','#ffffff');

so.addParam('allowfullscreen','true');

so.addParam('allowscriptaccess','always');

so.addParam('wmode','opaque');

so.addVariable('file','<?php echo Mage::getBaseUrl(); ?>/skin/frontend/[your-package]/[your-theme]/videos/<?php echo $video; ?>');

so.write('mediaspace');

} );

} );

</script>

<?php } else { ?>

<?php echo $video; ?>

<?php } ?>

</div>

<?php } ?>

And save the file as /app/design/frontend/[your-package]/[your-theme]/template/catalog/product/view/video.phtml

3b. catalog.xml
Open up /app/design/frontend/[your-package]/[your-theme]/layout/catalog.xml and add this line:

<block type="catalog/product_view" name="product_video" as="product_video" template="catalog/product/view/video.phtml"/>

as a child anywhere inside this node:

<block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">

… and save the file.

3c. catalog/product/view.phtml
Open up /app/design/frontend/[your-package]/[your-theme]/catalog/product/view.phtml and add this line:

<?php echo $this->getChildHtml('product_video'); ?>

wherever you want the video to appear on the page. Save the file.

4. Obtain and upload a copy of the free JWPlayer
Download the player from: http://www.longtailvideo.com/players/jw-flv-player/
After you download the ZIP file, extract and upload the files using an FTP client to: /skin/frontend/[your-package]/[your-theme]/videos/*
With the FTP client, rename the “mediaplayer-viral” folder to “mediaplayer”

5. Add video to a product
In the Magento Admin Panel, navigate to Catalog > Manage Products and click on the product you’d like to add video to. You should see a textarea labeled “Video”.

5a. Use HTML embed code
In the “Video” textarea, simply drop in the HTML code you’ve received (such as from YouTube) and click “Save” to save the product.

5b. OR use an FLV file
- Upload your FLV file to /skin/frontend/[your-package]/[your-theme]/videos/
- In the “Video” textarea, specify the filename of the FLV you’ve just uploaded.
Repeat Step 5 for all of the products you want to add video to.

Congratulations, you’ve added video to your products.