Add a YouTube Video to Your PrestaShop Store’s Product Page

by Curt Donohue on July 8, 2012

Add Video to Your PrestaShop StoreThis tutorial was created using PrestaShop version

This tutorial will teach you how to add a YouTube video to Your PrestaShop store's product page.

Incorporating video into your store is not only easy, but it's essential.  Video is one of the best ways to promote your products and it's becoming one of the best way to get ranked in search engines as their ability to determine the content inside of videos improves.

I'm guessing you already know that Google loves video, which should be evident since they own YouTube.  I believe that the reason Google loves video is because people love video and it's Google's job to give people what they want.  That's your job too, if  you want to get ranked in Google or any other search engine for that matter.

For most people with little to no experience in adding video to a website, the process can be a bit overwhelming.  The good news is that, if you want to use videos from YouTube, the process is about as easy as it gets.  YouTube provides excellent tools to embed videos into your website without much special knowledge.  And, below, you'll receive the only special knowledge you need to add videos to your store.

In this tutorial, we'll cover the following topics:

  • How to determine the correct size your video needs to be
  • How to find the embed code
  • How to customize the size of the YouTube video player
  • How to insert a YouTube video using the built-in PrestaShop media player
  • Commons mistakes to avoid

Tools You'll Need:

  • Browser Inspection Tool
    • Firefox Users – Firebug is a great browser inspection tool and the one I use in the videos below.
    • Chrome Users – Chrome has some built in features for inspecting HTML, or you can download the Firebug Lite plugin that will give you some of the same functionality as Firefox users have with the full version of Firebug.
    • Internet Explorer Users – If you're using Internet Explorer, you'll want to consider the IE Developer Toolbar.  There is also a Firebug Lite version for IE.

Click on the images below to watch the videos.

Part 1

Part 2

Part 3

If this tutorial was helpful, you might also enjoy learning how to add a YouTube video to the right or left column.  Click here to check out Add YouTube Video to Your PrestaShop Store Using the AddStuff Module.

Curt Donohue

Curt Donohue is a PrestaShop enthusiast and the creator of as well as PrestaShop 1.4 Tutorials.

Facebook Twitter LinkedIn 

josh s January 10, 2013 at 3:58 pm

Hey Curt theanks for this article. Coul you tell me how to embed a video (video thumbnail” beside the additional images?

Ernesto Neyra October 28, 2012 at 7:54 pm

Hello Curt,

Thanks for the great video tutorials.

Do you know something about Prestashop block the option to paste Youtube videos with “Home text editor” on version 1.5?

I´m following your steps, but every time, every browser send me to a Server Error after I paste a Youtube code with the “Home text editor”.

I can´t believe they disable this function just to sell addons. I really want to think I´m wrong with that.

Let me know if you heard something about it or a new way to put Youtube video on my prestashop home pages without $100 dollar addon.

Thank you very much

Bill Mitchell July 17, 2012 at 5:58 am

Curt, great video and instructions (for a novice like me) very clear. Have you done a tutorial on embedding non Utube videos as my suppliers have a number available? I embedded a Utube video following your tutorial, but it was spoiled slightly by the end frame which shows a number of other other videos that might be of interest. see

Curt Donohue July 17, 2012 at 6:49 am


Glad the video helped. The quick answer to your question is yes you can embed other media besides YouTube videos. I was experimenting a bit this morning and got an MP4 video embedded. You’ll need to use the “Insert/Edit Embedded Media” button in the Description’s text editor. I touched on this briefly in the video.

If you’re savvy with embed codes, you could embed your HTML directly in the HTML editor for the Product Description without having to use the “Insert/Edit Embedded Media” button.

It took me a while to get something to work. But after I had the settings pretty much right, the video looked OK. You won’t have a ton of control over the look of your video player but you will be able to control it better than YouTube videos.

Hopefully, that gives you a place to start. If I have time, I’ll try to work on another video on this topic over the weekend.

sami July 12, 2012 at 2:31 pm

FYI, the “fancybox” lightbox component which is shipped with Prestashop is capable of presenting videos. Google search “fancybox video” for howto…

…but I recommend AGAINST presenting videos within a lightbox.

As a site visitor, I object to finding myself “trapped”, held captive (lightbox obscuring the balance of the page content) while the video plays. Consider granting not-entirely-singleminded site visitors the opportunity to scroll down the page to scan your other content while the video plays, eh.

Also, I am not wholly convinced that search crawlers will be able to find/index a video which is “called into existence” via a lightbox script. When the page loads, view-source and see if you can even find a discernable URL for the to-be-lightboxed video. Probably not. You’ll probably find a clickable element bearing a defined onClick handler, plus paramaters (videofile name, not necessarily its full URL).

Paul Whittemore July 11, 2012 at 6:13 am

Hi Curt
I’m still learning lots from your site and videos, good work.
Love your video overlay you now use.
Is it possible to do that in Prestashop?
We sell DVD’s of filmed events and would love to be able to put a video thumbnail next to the image thumbs, so the visitor can just click and watch the video highlights overlaid in a reasonable size.
I used mediaboxAdvanced – when my site was in html, (those were the days), but how do I do that it in prestashop???

Keep up the good work

Curt Donohue July 11, 2012 at 6:45 am

Hi Paul,

Thanks for that feedback. I’m happy to hear the “video overlay” is working. That type of presentation is called a lightbox and PrestaShop currently uses something like that to display enlarged pictures on the product page.

I’m sure a lightbox could be added to PrestaShop for displaying videos. In fact, it’s probably pretty easy for a good coder.

It’s should be a matter of finding the right code and figuring out where it should be placed. I don’t currently know the answer to that yet, but I’ll check into it as it is quickly becoming one of my favorite ways to present pictures and videos.

Just FYI.’s backbone is Wordpress. It’s really easy for me to add in lightbox functionality because there are many free and paid modules that plug into the Wordpress framework. I’m not sure, because I haven’t looked yet, but there may be a module available for PrestaShop.

If you find one before I do, please let us all know what you found.

Another options would be to hire a developer off of Elance or Odesk to set you up with a light box.

By the way, I’m assuming you just want the lightbox to display a video that you have placed in the Product’s Page Information Tab, correct?

Previous post:

Next post: