Connect with Facebook
Prices in

How to Add Video to Products in Magento

Posted on March 17, 2010 by Antonio David There have been 7 comment(s)

Update! We now have a FREE extension that will easily enable you to add video to your product pages extremely easily. Check it out!

Adding a video to a product greatly enhances the online shopping experience. The out-of-the-box Magento package doesn't support video. This How-To shows just how to do that. We'll be able to either (1) drop in HTML embed code from sites like YouTube, or (2) use an FLV file that we provide.

This article assumes you have the jQuery Javascript library installed and have "jQuery.noConflict()"' set up.  If you don't have jQuery.noConflict(), then simply replace instances of "jQuery" with "$".  If you don't have this library, download jQuery here.

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
- Scope: Global
- Catalog Input Type of Store Owner: Text Area
- Default Value: [leave blank]
- Unique Value: No
- Values Required: No
- Input Validation for Store Owner: None
- Apply To: All Product Types

Frontend Properties

- Use in quick search: No
- Use in advanced search: No
- Comparable on Front-end: No
- Use in Layered Navigation: No
- Use in Search Results Layered Navigation: No
- Use for Price Rule Conditions: No
- Position: 0
- Allow HTML-tags on Front-end: Yes
- Visible on Product View Page on Front-end: No
- Used in product listing: No
- Used for sorting in product listing: No

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"> </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.

* This method is tested and working for Magento v 1.3.2.4

7 thoughts on “How to Add Video to Products in Magento”

  • Simon Lilly

    I've found that Magento Community Edition does support video out of the box. We use an embedded YouTube video on a number of products without problem.

    1. Create a new Text area attribute called Video

    2. Associate that with the Attribute Set you wish to add video to.

    3. Copy the embed code from YouTube and paste into the relevant text area when adding a new product.

    You can see an example of this in action here: http://www.great-save.com/adidas-response-fingertip-10.html

    The way you have described above is a superior method, especially if you have your own video to upload. But I think our quick and dirty way is a pretty good solution too.

  • Brady

    Wow - that's for the in-depth writeup. Definitely seems like a worthwhile process.

    Can you provide a URL so we can see a sample / demo of what the final result looks like?

  • Traci Kaspar

    I would also like the ability to upload / pick video in the admin module as an option for product image. I am willing to pay for this!

  • Evy

    Wow...great article. And thanks, Simon. Your method worked great for me! I manage a medical equipment website and I wanted to easily embed a few product videos.

    I love when I can find easy solutions!

  • Dayne

    Great tutorial just what i was looking for. One problem i am having is the option to add a video to a configurable product it is not there. For simple products works fine... Any ideas?

  • Ecommerce Web Design

    Very Helpful something Im working on for a client and this helped alot

  • jon

    how do you place the video in a tab?

Comments
Want 10% off?