Embedding YouTube videos on Product pages

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.

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.php?main_page=product_info&cPath=1&products_id=1

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

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.

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

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.

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 ?

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-plugins/admin-tools/enhanced-zen-cart-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.

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 :-)

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

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

I have read all the forums regarding adding YouTube videos to a product page and nothing seems to work.

Has anyone added a YouTube video to a 1.5.7c version page running the Response template to a product page?

here's what a search reveals> - >

• On a computer, go to the YouTube video or playlist you want to embed.

• Click SHARE .

• From the list of Share options, click Embed.

• From the box that appears, copy the HTML code.

• Paste the code into your website HTML

I have tried your suggestion several times without success.

"<iframe width="1255" height="706" src="https://www.youtube.com/embed/Ol6OiUNnlkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"

jodean:

I have read all the forums regarding adding YouTube videos to a product page and nothing seems to work.

Has anyone added a YouTube video to a 1.5.7c version page running the Response template to a product page?

I assume you are adding the iframe code to the Products Description field in Admin, that you are using the ZC Responsive Classic template and that you don't have any other mods installed - I've just tried your code with success. Try switching to the Classic template to see if it works there. Otherwise we'll probably need a link to the site.

Once the OP's issue is resolved, if some nice person would write a canonical article for the documentation about how to do this, that would be great. :)

simon1066:

I assume you are adding the iframe code to the Products Description field in Admin, that you are using the ZC Responsive Classic template and that you don't have any other mods installed - I've just tried your code with success. Try switching to the Classic template to see if it works there. Otherwise we'll probably need a link to the site.Simon, thanks for your suggestion. I just tried the Classic Template and I get the same problem. If you would like to take a look at the page here are the steps.tennesseetraditionalflies.com/shopClick on Rods & Reels menuClick on Douglas Sky G Series productThe YouTube is towards the bottom of the page

jodean:

Simon, thanks for your suggestion. I just tried the Classic Template and I get the same problem. If you would like to take a look at the page here are the steps.tennesseetraditionalflies.com/shopClick on Rods & Reels menuClick on Douglas Sky G Series productThe YouTube is towards the bottom of the page

I can see the YouTube video in my Firefox, Chrome and Edge browsers. Not sure why you can't - clearing the browser cache is sometimes recommended, although I've never needed to when embedding videos on my site.

simon1066:

I can see the YouTube video in my Firefox, Chrome and Edge browsers. Not sure why you can't - clearing the browser cache is sometimes recommended, although I've never needed to when embedding videos on my site.

Simon, I tried Firefox and it works. I cleared the Chrome browser history and yes now it works. It blows me away how often Chrome is the cause of the problem. Thanks for helping.

jodean:

Simon, I tried Firefox and it works. I cleared the Chrome browser history and yes now it works. It blows me away how often Chrome is the cause of the problem. Thanks for helping.

I was in error in my previous post. It does not work in Chrome even after clearing the browsing history.

It works for me in Chrome. Version 98.0.4758.102 (Official Build) (64-bit)

I would get the Clear Cache extension for Chrome ASAP