How To Add a Product Video On a Magento Product Page?

Posted by Joe / July 6th, 2017 / No responses

“The beauty of developing a video is that you are making it easier for the viewer to be exposed to the information you are trying to communicate”

As the video marketing and utilization of video continue to rise, it’s undoubtedly clear that more companies and organizations are looking to online video as a way to improve their marketing strategies. Especially on eCommerce stores, video plays a multi-starer role by itself alone:

• A perfect marketing medium
• An easy way to communicate your words to your customers
• A complement to your eCommerce product description and much more.

Sadly Magento does not provide any default configuration to embed a video on its product pages. But luckily, thanks to the API services from popular video libraries like YouTube, DailyMotion, and Vimeo, we can embed a video on the Magento product pages in three ways:

1. By using the YouTube embed code.
2. By Making some tweaks in the Magento front files.
3. By installing an extension for Magento product page video support.

We will see all the three ways here, and I will explain them all in detail in this article. So, keep reading.

1. Embedding video on Magento product page (Without an extension)

Way #1: The easy way

Here we will embed a YouTube video on a Magento product page. It is so easy with YouTube supporting the developers with its iframe embed code.

On YouTube, for every video, you will find an embed code (iframe). Something like this:

 

 

You just need to copy this embed code and paste in your product description of the product where you want to show the video. That’s it and done. You have embedded a YouTube video on one of your Magento product pages.

To get the YouTube embed code, follow these steps:

1. Open YouTube on a computer or laptop.
2. Go to the YouTube video that you want to embed.
3. Scroll down and click on the “Share” button. It will open drop open an interface with three options – Share, Embed, and Email.
4. We are concerned with Embed here.Click on Embed tab.
5. Copy the iframe code shown just below the Tabs. It will also show a preview window to see how the video will look on your page.
6. Paste this code in your Magento Product description and save it. That’s it.

Please note: You can paste this code in any of your Website, blog, or e-Shop HTML code to show the video on the respective locations.

Way #2: Also an easy way

Let’s try adding a product page video using a different way. This approach needs you to have an access to the site’s FTP (Files). Using this approach you can add the video on any of the sections on the Product page; not just the product description section.

So find the following file in your Magento site’s file structure:

app/design/frontend/yourpackage/yourtheme/template/catalog/product/view.phtml

Where “yourtheme” is the name of the theme you are currently using.

Here, we will place the video just below the “Product Name”

So, In this file search for the following block of code:

<div class=”product-name”>

<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), ‘name’) ?></h1>

</div>

Just below where the above <div> ends, Place this code:

<?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; ?>

Now in order to show a video, you just need to copy and paste the video UID (Unique Identifier) into the video attribute field.

You can get the video UID from the YouTube video URL itself. It is shown like this:

https://www.youtube.com/watch?v=06WPhrnNQik

Where “06WPhrnNQik” is the video UID.

So this is how you can embed a YouTube video on your Magento product page very easily.

Do you also want to embed Daily Motion or Vimeo videos? Or do you wish this approach could have been easier?

Well, the third way that I am going to explain is the ultimate answer. With this approach, you can embed multiple videos, on multiple pages at once. Moreover, You do not need to edit any code.

2. Embedding Magento product page videos (with extension)

If you find the above approaches somewhat difficult and tedious, you can try the Magento product video extension to help you here. Just follow these steps and you can embed multiple YouTube, Vimeo, and Daily-motion videos on your Magento product pages without editing the code.

A. Install the Extension and enable it going to “System>>Knowband Extensions>>Product Video.

 

 

 

B. As soon as the extension is enabled, every “Product Edit” page on your Magento store will start to display a new tab “Product Video”. So, now go to the Product Edit page of the product where you want to show the video through “Catalog>>Manage Products”.

C. Open the product edit page.

 

 

D. On Product Edit page, Scroll down and find “Product Video” Tab. Click on it.

E. Here, click on the “Add New” button on Upper left the corner. It will open the add new page. Here you can add your videos.

 

 

F. On Add New page, you can add your videos by selecting the Video type- YouTube, Vimeo, or Daily-Motion. Fill up the form as shown in the image below and save your product:

 

 

G. That’s it, you have now successfully added a video on your Magento product page.

 

 

Not just this, with this extension, there are various customization features that you can use. You can change the location of the video on the page, you can choose how the iframe will look and what control it will show to your front user. You can also adjust the size of the video window that too all without touching a single line of code.

You can read this short documentation to know more in detail about this product video extension. Our Magento development services are open to all your queries and suggestions.