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:
- Create a product attribute for the video code
- Assign the newly created attribute to an attribute set
- Modify the template files
- Obtain and upload a copy of the free JWPlayer
- 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
