Colorbox, cannot control Youtube video size ... too small

Question

I’m setting up colorbox here (click “expand-all”, then 2nd link) but the YouTube video that I embed in colorbox does not display in the correct size. Close is also in an odd place. photo showing the problem: i.stack.imgur.com/of8X4.png

This should be a 720p video, and open quite large. I tried changing this line in a script, but this has no effect:

$(".youtube").colorbox({iframe:true, innerWidth:960, innerHeight:720}); 

Do I need to specify the size in html?

 <li><a class='youtube' href="http://www.youtube.com/embed/hvHB5RvdorU?rel=0&amp;wmode=transparent">Forming System Assembly Video</a></li> 

There is a chance that an expanding list will step on him Colorbox, I got the code here . This is based on jQuery.

Answer 1

You forgot to specify the colorbox CSS file:

 <link rel="stylesheet" href="css/colorbox.css" /> 

Please note that when you download colorbox , the zip file will contain 5 examples. Each example has a different colorbox style defined in the colorbox.css file (located in the example folder, for example, “Example 1 / colorbox.css”). Choose your taste and copy the corresponding colorbox.css file to the css directory.