CODEWITHSUNDEEP
javascripthtmlembedcolorbox
matt hoover
matt hoover

Reputation: 346

Colorbox help! Embed a youtube video

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.

Upvotes: 1

Views: 16829

Answers (2)

user4023522
user4023522

Reputation: 

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

Upvotes: 8

webdeveloper
webdeveloper

Reputation: 17288

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 });

Upvotes: 9

Related Questions