How to popup a jquery window to play youtube video?

Question

I need this video to play automatically. It would be nice, this code can play videos from other sources like yahoo etc.. Is it also possible to use HTML5, instead of jquery?

Answer 1

The function or plugin you use to display the popup window will probably be different from what you are using to display the video. In this example I used the Overlay Plugin from jQuery Tools to display the modal then used swfobject to display the YouTube Flash Player. Alternatively, you could use an HTML5 video player with Flash fallback to display the video, but you would still need it to popup your modal first.

<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
    class="video-link">Video 2</a>

<div class="modal" id="video-modal">
    <div id="video-container" style="width: 425px; height: 344px;"></div>
</div>

<script language="javascript" type="text/javascript">

    $(function() {
        var videoModal = $('#video-modal').overlay({
            expose: {
                color: 'black',
                loadSpeed: 200,
                opacity: 0.85
            },
            closeOnClick: true,
            api: true
        });

        $('.video-link').click(function() {
            videoModal.load();

            var videoUrl = $(this).attr('href');
            var flashvars = {};
            var params = {
                allowFullScreen: "true",
                allowscriptaccess: "always"
            };
            var attributes = {};

            swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);

            return false;
        });
    });

</script>

Answer 2

SimpleModal is a great jQuery plugin as it offers many different options, one being displaying external content:

// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
    closeHTML:"",
    containerCss:{
        backgroundColor:"#fff",
        borderColor:"#fff",
        height:450,
        padding:0,
        width:830
    },
    overlayClose:true
});

Bill Beckelman has great series of tutorials on integrating SimpleModal with Asp.Net as custom confirmation dialog box. He demonstrates how to create great client side functionality as well as how to post back to the server. it really helped get my head wrapped around how to best integrate jQuery with ASP.Net.

Answer 3

Look at the demos for FancyBox and ColorBox