I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:

{js}

<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>

<p><a href="javascript:void jQuery.colorbox({
            html:'<iframe width=600 height=400 src= frameborder=10 allowfullscreen></iframe>'
                })"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>

Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.

If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.

I am completely new to javascript and using colorbox. I can get the video to load and close as I would like. However, I don't know how to change the formating of the box or how to make the background more opaque while the pop-up apears. I have the following code:

{js}

<br>
<br>
<h1>hello world! This is soooooo exciting! </h1>

<p><a href="javascript:void jQuery.colorbox({
            html:'<iframe width=600 height=400 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=10 allowfullscreen></iframe>'
                })"> <img src="/uploads/features/featured-block-1.jpg" /></a></p>

Also I have been having this weird problem where I close the pop-up, but the background still stays opaque.

If anyone could post some code examples or explain to me how/if the colorbox takes parameters, I would greatly appreciate it.

• javascript
• html
• embed
• colorbox

• Colorbox docs are quite clear about the paramers it accepts I think. If you want to change the style you have to go into the corresponding CSS. – madth3 Commented Oct 3, 2012 at 18:17
• Sorry hakra, I am new to the community and certainly will do as you say. – matt hoover Commented Oct 3, 2012 at 18:25

2 Answers 2

All options you can find on this page: ColorBox

Here is example:

$.colorbox({ href: 'http://www.youtube.com/embed/eh-0knDpn5g', width: '600px', height: '400px', iframe: true });

<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
    $('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
        var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
        if (videoId && videoId[1]) {
            return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
        }
    }});
</script>