Follow by Email

Tuesday, August 23, 2011

Show product video in magento product details page

Here’s the sequence of steps we’re going to take:
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.

- 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

- 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
- Enable WYSIWYG: Yes
- 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. Now create a video.phtml And save the file as /app/design/frontend/[your-package]/[your-theme]/template/catalog/product/view/

<?php $_product = $this->getProduct(); ?>
<?php $video = $_product->getData('video'); ?>
<?php if( $video !='' ){ ?>
<h2>Product Video</h2>
<div class="products">
<?php //echo( Mage::getBaseDir('media').'\\'. $video); ?>
<?php if( file_exists( Mage::getBaseDir('media').'\\'. $video) )
<div id="mediaspace">&nbsp;</div>
<script src=""></script>
$( document ).ready( function(){
$.getScript( '<?php echo $this->getSkinUrl('videos/mediaplayer/swfobject.js'); ?>', function(){
var so = new SWFObject('<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_SKIN); ?>
so.addVariable('file','<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA). $video; ?>');
} );
} );
<?php } ?>
<?php } ?>

4. 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"/>
<block type="catalog/product_view" name="" template="catalog/product/view.phtml">
this block.

5. catalog/product/view.phtml

Open up /app/design/frontend/[your-package]/[your-theme]/catalog/product/view.phtml and add this line:
getChildHtml('product_video'); ?>
6. Obtain and upload a copy of the free JWPlayer

Download the player from:
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"

7. now just write your video file location like:- wysiwyg/product1.flv


  1. This comment has been removed by the author.

  2. Thanks admin, for sharing this script.
    I would suggest to use a ready-made tool like Product Videos Magento Extension by FME, having a lot of features to organize videos in your Magento store.