views:

281

answers:

1

Hi all

How to play a embedded code in lightbox type pop up?

Here is the whole code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.1 | Demonstration</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - images
            */

            $("a#example1").fancybox({
                'titleShow'     : false
            });

            $("a#example2").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $("a#example3").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'none',
                'transitionOut' : 'none'
            });

            $("a#example4").fancybox();

            $("a#example5").fancybox({
                'titlePosition' : 'inside'
            });

            $("a#example6").fancybox({
                'titlePosition' : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'titlePosition'     : 'over',
                'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'     : 'inside',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'             : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'iframe'
            });

            $("#various4").fancybox({
                'padding'           : 0,
                'autoScale'         : false,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
        });
    </script>
</head>
<body>
<div id="content">
    <p>
        <a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>

        <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>

        <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
    </p>
</div>
<div><p>&nbsp;</p></div>
</body>
</html>

This above code working for image perfectly. But how shall i play the embedded code instead of image.

Here is the sample embedded code.

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/WUW5g-sL8pU&amp;hl=en_US&amp;fs=1&amp;"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WUW5g-sL8pU&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

thanks in advance...

A: 

there are several lightbox scripts that allow you to automatically embed a youtube clip in an overlay.

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ is one, jQuery in this case but there are dozens more if you google for it, jquery, prototype, mootools, ...

ChrisR
many thanks Ramakers for giving exactly what i need...
Fero
Hi Ramakers... One small prob with that script... Its only working if we give the URL but if we give the embedded code it's not working.. Is there any other suggestion
Fero
It shouldn't be too hard to extract the video id from the embedcode and form an url with that. As far as i know a lightbox script that works with the embedcodes is something i haven't seen before so i don't think its possible as far as i know.
ChrisR