Embedding YouTube videos on Product pages

[ailtait]

Hi,

Wondering if anyone can advise. We're looking to add some YouTube based videos to our product pages, to give users a better idea of how some products look.

It looks like there is an issue with embedding YouTube on product pages. If I post in text mode, it simply writes out the embed code. If I paste it via HTML / Source mode, it doesn't save the code.

I've managed to embed a video using the older Object option from YouTube, but it's now depreciated, so I don't really want to start using it.

I've also found a plugin that seems to get around this, but it only allows 1 video per product, and (from the plugin description) it also removes the option to view the video full screen.

Am I missing an obvious work around here? Has anyone else managed to achieve this with the latest YouTube embed code (not the Object version)?

Thanks in advance.

[stevesh]

If you mean the product info pages, it should be a simple matter of pasting the YouTube <iframe> (copy imbed code) into the product description. - http://www.stevesh.com/demo2/index.p...&products_id=1

If you mean in the product listing, that's different and requires a little more work.

[ailtait]

Hey stevesh, thanks for this.

It is indeed the product info page we want it to display on, not the product listings. Strange that the example you've given clearly works. When I try to copy / paste the code from YouTube, I experience 2 things:

1) If I paste the code in WYSIWYG friendly view (not HTML view), and save, the iFrame code displays on the page, not the video.

2) If I paste the code in HTML view, and hit update, it doesn't save the code I've just pasted. If I click back into HTML view, the code I've just pasted is gone.

I've actually tried copying the YouTube iframe embed code directly from Youtube, for the same video you've used in your example, and still I'm experiencing these 2 outcomes.

For some of the things we've been able to do with Zencart, it seems strange that what seems like such as simple thing as this is not so simple. The Joys!

For info, it's ZC 1.5 we're using.

[stevesh]

Have you tried Plain Text mode ? That's what I used.

[ailtait]

I hadn't, but have now, and it doesn't seem to work either. Very strange in fact. Paste as plain text generally seems to allow me to paste, unless i'm pasting an opening HTML tag. For example, it will let me paste "<", but won't let me paste "<iframe ...". It will also let me paste "iframe". I've even tried pasting it all individually i.e. "<", then "iframe", and so on. But still no luck.

Tried putting in notepad first, then into Zen as well, just to check. Also tried in IE, Firefox and Chrome, each with different variations of no.

Do you have any plugins or custom code in you demo site that could be helping it work? I've been looking around the web and quite a few people seem to be having the same issue of embed code not working.

Thanks for the helps so far. I'll keep digging.

[stevesh]

The test site is a clean installation of Zencart 1.5.1, with no mods. It does use a custom template, but it's just a clone of the Classic template and doesn't affect admin.

I don't have a HTML editor installed. You don't mention which one you're using, or what version of Zencart, which could be important.

What exactly do you mean by 'it won't let me paste' ? What exactly happens when you try ?

[ailtait]

We're running Zencart 1.5.0. Yes, it has an HTML Editor in it. It was installed as part of the initial setup. This is a link to it: http://www.jsweb.co.uk/zen-cart-plug...rt-html-editor. It appears to use TinyMCE.

I've just tried disabling it, and it seems to have brought some success. Copying / Pasting directly from YouTube now seems to work. The only problem is that by disabling the editor, the text editing isn't as user friendly, which means the client would need to learn some basic HTML tags.

I tried disabling, then successfully adding the video, then re-enabling the HTML editor. The problem is that if I go back to my product with the re-enabled editor and save it (even without changing anything), it removes the video again.

So it looks like the options are either no video and a nice editor, or videos and a text only editor. It looks as though it's specifically TinyMCE that's blocking the iframe content, so I guess I now need to look at a way to alter the TinyMCE functions to allow iFrames.

When I was trying to paste as plain text, literally nothing was happening. If I used right click > paste, it told me my browser didn't support that function in plain text, that I should use keyboard short cuts. When I used short cuts, nothing happened. No error, nothing pasting, nada. Just a continually flashing cursor where the content should paste.

[ailtait]

Success! It looks like TinyMCE, by default, does not allow iframes. After some research, I found a line in one of the MCE files called "extended_valid_elements ", to which I added "frame[src|width|height|name|align]". Saved and uploaded.

Logged out of admin, logged back in and tried copying / pasting again from YouTube in HTML view. It worked!

Thanks for helping me figure this out :-)

[stevesh]

For those reading this thread, the CKEditor is the best available.

[ianhg]

Have you seen this http://www.zen-cart.com/downloads.php?do=file&id=1340