Short video on product images

[nicolle_leong]

Hi everyone,

Is that possible to insert video to product images.
I do found a lots of plugin that we can put youtube link on product description, it can be easily done by using ckeditor for the content part.

But i would like combine it with product images, (either short video or youtube link),where it can be shown/play together on main product images.

Thanks a lot.

[simon1066]

Hi everyone,

Is that possible to insert video to product images.
I do found a lots of plugin that we can put youtube link on product description, it can be easily done by using ckeditor for the content part.

But i would like combine it with product images, (either short video or youtube link),where it can be shown/play together on main product images.

Thanks a lot.

Although I don't have a video together with main product images I have replaced the main product image with an embedded video (vimeo in my case). You can have both though, I'll explain at the end.

It's a bit of a faff and there is probably a better way (integrating it into the database and Admin for example) but the process that worked for me was:

1. Choose a product type to use solely for products with a video as main image - I used Document Product Info
2. Rename a copy of tpl_modules_main_product_image.php to tpl_modules_main_product_video.php
3. In tpl_document_product_info_display.php rename tpl_modules_main_product_image.php to tpl_modules_main_product_video.php
4. In tpl_modules_main_product_video.php delete everything inside <div id="productMainImage" class="centeredContent">...</div>
5. In tpl_modules_main_product_video.php add something like:

<?php
	if ($_GET['products_id'] == 350) {						
		echo MY_VIDEO_1;
	} elseif ($_GET['products_id'] == 348) {						
		echo MY_VIDEO_2;
	} elseif ......
?>

the product_id being your own.

6. Define MY_VIDEO_1, MY_VIDEO_2 in document_product_info.php language file by adding:

define('MY_VIDEO_1', '<iframe> ........</iframe>');
define('MY_VIDEO_2', '<iframe> ........</iframe>');

7. Change settings in Admin > Catalog > Product Types for Document - Product to suit your needs.

Style the placement of the video on the main product page with css. This takes some doing to have it work in a responsive template, luckily for me the Vimeo embed code helps with this. You might need to have a different div and class for the video in tpl_modules_main_product_video.php, if displaying both the main image and a video.

If you want to have both the main product image and a video the instead of:

3. In tpl_document_product_info_display.php rename tpl_modules_main_product_image.php to tpl_modules_main_product_video.php

use

3. In tpl_document_product_info_display.php find:

require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php');

and add this before or after it:

require($template->get_template_dir('/tpl_modules_main_product_video.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_video.php');

It's quite basic and only really feasible if you have a limited number of video'd products.

I use it for displaying a 30 second preview of a video product which then allows the customer to checkout and buy the full version.