Videos in Image Machine

[eldon99]

Just curious if there are any plans or if there is currently a way to allow for videos (youtube and the like) to display as part of the Image Machine along with the normal images?

Thanks for any insight.

[Brennan]

Re: Videos in Image Machine

We're probably not going to built it into Image Machine itself, but you can easily do this now using custom product fields to store the youtube embed code:

http://www.headblade.com/product/540016.html

[Dan - Glendale Designs]

Re: Videos in Image Machine

We have implemented this for clients as well, feel free to reach out to us for pricing.

[SpeakerRepair.com]

Re: Videos in Image Machine

It would be great to have a field in the Edit Product section to enter the video link. Many other carts have this built-in.

[Rick Wilson]

Re: Videos in Image Machine

We have it built in as well, that's exactly what custom fields are designed to do.

[SpeakerRepair.com]

Re: Videos in Image Machine

We have it built in as well, that's exactly what custom fields are designed to do.

Rick, can you or Brennan give a quick tutorial on how to do this? I've tried using Custom Fields to display You Tube videos and could never get it working properly.

Edit: I did figure out how to display it on the product page using this code:

<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:video">  &mvt:customfield_names:customfields:video;:  
<b>&mvt:product:customfield_values:customfields:video;</b><br>  
</mvt:if>

But I'd like to display it just like the site that Brennan posted: http://www.headblade.com/product/540016.html

Can I get some help with this?

Thanks,
Eric

[Rick Wilson]

Re: Videos in Image Machine

Yep, I'll ask Brennan to post something.

[Brennan]

Re: Videos in Image Machine

Here is a high level overview of what we did on that site:

1. Create a custom product field to store the video id, this is from you tube

2. This on the product page we read in this id and use it to display the video thumb:

<mvt:item name="customfields" param="Read_Product_Code( l.settings:product:code, 'video1', l.settings:video1 )" />
<mvt:if expr="l.settings:video1">
			<div class="videos-link" id="&mvt:video1;">
				<img src="/images/icons/icon_video.png" alt="Video" title="Video" class="video-icon" />
				<img class="video-thumb" src="//img.youtube.com/vi/&mvt:video1;/1.jpg" alt="&mvte:product:name; Video" title="&mvte:product:name; Video">
			</div>
		</mvt:if>

3. We then have some JS that when the video is clicked it opens a lightbox with the video (JS can be found on that site):

[Sky]

Re: Videos in Image Machine

Hi, I followed your instructions and pasted the code in our product layout section of the PROD page template, and the video icon shows up with a hand when I hover my mouse cursor over the icon, but the video doesn't load. I click the icon but nothing happens.

Here is a link to the product we're trying to get to work:
http://www.spiritaccessories.com/sto...drinkware.html

Even with the JS Lightbox code I found in the source code of the head shaving website I inserted it in the page template as well, placing it in different spots with no luck.

Any thoughts?

[rajnishsi]

Re: Videos in Image Machine

Make sure you have an iframe on your page as well to implement that code, it should go with ID 'videoFrame' if you are copying the exact code. Video will load inside that iframe.

Also, right now, there is no JS on your page to trigger anything on click.

[Sky]

Re: Videos in Image Machine

Thanks for the info.

Can you tell me the java script code I need to make this work, and where to place the java script code?

I have the iframe in the code already, does it look correct?

[Sky]

Re: Videos in Image Machine

http://www.spiritaccessories.com/sto...drinkware.html
Hi take a look we now have it coming up but rerouting to the youtube site.
We can't figure out how to get it to pop up and stay on our site. We are not seeing the right code on the page (headblade) to know what and where to put it to accomplish the task.

[rajnishsi]

Re: Videos in Image Machine

You have tried to use magnific popup in your page, but it says that undefined when I try to trigger it manually, try to place the code at the end of page, after inclusion of magnific popup library. Also, 2 different versions of jQuery are being used in your page, may not be a significant problem, but may cause some little bugs. Only include the latest version which supports all features required by your design.

[Gordon - Phosphor Media]

Re: Videos in Image Machine

Re: multiple versions of jQuery - we are seeing many sites where loading two versions of jQuery KILLS all jQuery code.

[Sky]

Re: Videos in Image Machine

Hi all. Thanks for all the help you've offered. With a little more research I was able to make the video link show up in a light box.
Yeah!!!