Home » Tutorials For Beginner » How to display video on Magento product page

How to display video on Magento product page

Sometimes, there’re special products that need to be explain via Video, in this case, you will probably want to embed a video to your product page. So how to do this in Magento? There are many extension that can help with this, unfortunately, sometimes the extensions do not meet our requirements or design tasks because it will change your site’s layout.

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:

Add below:

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:

Now insert the following code into product XML Layout Update under Design tab on Edit Product page:
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.

Demo: http://customy.com/demo/1.7/gaming-computer.html

Have any questions or comment? Drop a line here!

About Gareth

avatar
Gareth is an editor at Tutorial Magento. His special hobby is to share magento knowledge and experience with everyone.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Scroll To Top