Magento How to display video on Magento product page

One picture is better than a thousand words. You will find this common truth in any textbook on marketing.

One video is better than a thousand pictures and even than a thousand words. Any SEO expert will tell you this.

One can find in the Internet many ready to use Magento extensions (both free and paid)  that allow to add a video to the product page.

Unfortunately, sometimes the extensions do not meet our requirements or design tasks.

In this post you will learn how to add a video to a Magento product page exactly where it should be according to the design or other requirements.

Let's place a video onto Magento product page. With sharing videos made easy on Youtube, just copy the iframe code and paste it into the product description. That's it. Video will be shown on the product page under the product description.

If this seems to be too easy, let's make it differently. We will create "video" text input attribute. Add it to appropriate attribute set and don't forget to reindex your data. Now you should find the place in the following file where you want the video to appear: app/design/frontend/yourpackage/yourtheme/template/catalog/product/view.phtml
In this example we will place it under the product name.

Find:

Code: Select all

<div class="product-name">
     <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>


Add below:

<?php if($_product->getVideo()): ?>
       <iframe width="560" height="315" src="http://www.youtube.com/embed/<?php echo $_product->getVideo() ?>" frameborder="0" allowfullscreen></iframe>
<?php endif; ?>

All we have to do now in order to show the video is to paste video UID (unique identifier) into the video attribute field.

For example, UID of the http://www.youtube.com/watch?v=U0CGsw6h60k is U0CGsw6h60k

Thats it.

Need something different? Product video on your product page sidebar? No problem. We need to create video template and use product "XML Layout Update" in order to insert videos into sidebar columns.

Create: app/design/frontend/yourpackage/yourtheme/template/catalog/product/video.phtml

With:

Code: Select all

<div class="block block-video">
    <div class="block-title">
        <strong><span><?php echo $this->__('Product Video') ?></span></strong><br>    </div><br>    <div class="block-content">
        <object width="193" height="130"><param name="movie" value="http://www.youtube.com/v/<?php echo $this->__($this->getLinkUrl()) ?>?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/<?php echo $this->__($this->getLinkUrl()) ?>?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="193" height="130" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    </div>
</div>


Now insert the following code into product XML Layout Update under Design tab on Edit Product page:

<reference name="right">
    <block type="core/template" name="video" before="-" template="catalog/product/video.phtml">
        <action method="setLinkUrl"><url>U0CGsw6h60k</url></action>
    </block>
</reference>

Note that we are using standard action method setLinkUrl, just like in callout blocks. 

This post demonstrates how the action method could be easily used to serve our purposes.