Jump to content

Videos/YouTube in popup like images


Recommended Posts

Hi there,


I'm trying to display youtube video clips in a popup (thickbox?) like the image gallery.


I cant get it to work though, can anyone help?


I've tried creating the link like this:-


<a href="http://www.youtube.com/watch?v=8VW0-fiXI3E" class="thickbox"> Video Here </a>


Example page here, "Video here" link at bottom of more info section.





Thanks for any help.

Edited by Paul_gpvr
Wrong Link (see edit history)
Link to comment
Share on other sites

  • 1 month later...

Today, I needed to do the same thing and by trying I found out how to do it and I want to share it with others...

First thing you should do is to try that thickbox is working on the page you want to have a video in, if it is not, first thing is to get it working - linked topic helped me to solve that


If it works properly now you have to use following code to link to youtube video which will be shown in thickbox


<a class="thickbox iframe" href="http://www.youtube.com/embed/q4a9CKgLprQ?autoplay=1&hd=1">Text</a>


Please note how the link in href attribute is written...




Following attributes like autoplay or hd are not necessary


That's it :) Hope it helps

  • Like 2
Link to comment
Share on other sites

  • 5 months later...
  • 7 months later...
  • 7 months later...

I'm on ps, writing a module to add youtube videos to products, show the vids thumbnails alltogether with the product images thumbnails and play them in fancybox as for the other full-sized images, so I was trying to simply use your line:

<a class="thickbox iframe" href="http://www.youtube.com/embed/q4a9CKgLprQ?autoplay=1&hd=1">Text</a>

from the product page, wich already have the fancybox script properly loaded, but It wont work. I had to copy this snippet (including it {literal} smarty tag)

<script type="text/javascript">/* <![CDATA[ */$("a.iframe").fancybox({'hideOnContentClick':true,'width':500,'type':'iframe','onComplete':function(){$('#fancybox-frame').load(function(){$('#fancybox-content').height($(this).contents().find('body').height()+10);});[spam-filter]);/* ]]> */</script> 

taken from the fourth step of the checkout process (used for view the terms and condition in fancybox).

So I suppose that the "type:iframe" param must be declared in the product page context.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...