here is a better example to work with: this is the actual sample page of the YouTube SWLObject javascript API demo but with a modal AJAX toolkit modal popup extender. Note that only the container <div> is inside the modal popup
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default6.aspx.vb" Inherits="Default6" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <html xmlns="http://www.w3.org/1999/xhtml";> <head runat="server"> <title></title> <script src="http://swfobject.googlecode.com/svn/tags/rc3/ swfobject/src/swfobject.js" type="text/javascript"></script> <style type="text/css"> body { font-family: verdana, helvetica; background-color: white; } #timedisplay { border: solid 1px red; width: 50px; } </style> <script type="text/javascript"> function updateHTML(elmId, value) { document.getElementById(elmId).innerHTML = value; } function setBCWytplayerState(newState) { updateHTML("playerstate", newState); } function onYouTubePlayerReady(playerId) { alert('fd'); BCWytplayer = document.getElementById("myBCWytplayer"); alert(BCWytplayer.innerHTML); setInterval(updateBCWytplayerInfo, 250); updateBCWytplayerInfo(); BCWytplayer.addEventListener("onStateChange", "onBCWytplayerStateChange"); } function onBCWytplayerStateChange(newState) { setBCWytplayerState(newState); } function updateBCWytplayerInfo() { updateHTML("bytesloaded", getBytesLoaded()); updateHTML("bytestotal", getBytesTotal()); updateHTML("videoduration", getDuration()); updateHTML("videotime", getCurrentTime()); updateHTML("startbytes", getStartBytes()); updateHTML("volume", getVolume()); } // functions for the api calls function loadNewVideo(id, startSeconds) { if (BCWytplayer) { BCWytplayer.loadVideoById(id, parseInt(startSeconds)); } } function cueNewVideo(id, startSeconds) { if (BCWytplayer) { BCWytplayer.cueVideoById(id, startSeconds); } } function play() { if (BCWytplayer) { BCWytplayer.playVideo(); } } function pause() { if (BCWytplayer) { BCWytplayer.pauseVideo(); } } function stop() { if (BCWytplayer) { BCWytplayer.stopVideo(); } } function getPlayerState() { if (BCWytplayer) { return BCWytplayer.getPlayerState(); } } function seekTo(seconds) { if (BCWytplayer) { BCWytplayer.seekTo(seconds, true); } } function getBytesLoaded() { if (BCWytplayer) { return BCWytplayer.getVideoBytesLoaded(); } } function getBytesTotal() { if (BCWytplayer) { return BCWytplayer.getVideoBytesTotal(); } } function getCurrentTime() { if (BCWytplayer) { return BCWytplayer.getCurrentTime(); } } function getDuration() { if (BCWytplayer) { return BCWytplayer.getDuration(); } } function getStartBytes() { if (BCWytplayer) { return BCWytplayer.getVideoStartBytes(); } } function mute() { if (BCWytplayer) { BCWytplayer.mute(); } } function unMute() { if (BCWytplayer) { BCWytplayer.unMute(); } } function getEmbedCode() { alert(BCWytplayer.getVideoEmbedCode()); } function getVideoUrl() { alert(BCWytplayer.getVideoUrl()); } function setVolume(newVolume) { if (BCWytplayer) { BCWytplayer.setVolume(newVolume); } } function getVolume() { if (BCWytplayer) { return BCWytplayer.getVolume(); } } function clearVideo() { if (BCWytplayer) { BCWytplayer.clearVideo(); } } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <p>Click "Load Video" or "Cue Video" below to start playing a video. <br />To play a different video, enter a YouTube video id and click "Load Video" or "Cue Video" again.</p> <!-- embed the player --> <cc1:ModalPopupExtender ID="MPEYTPlayer" runat="server" PopupControlID="PopupPopupDiv" PopupDragHandleControlID="DragPan" TargetControlID="hiddenpopupbutton" BackgroundCssClass="modalBackground" RepositionMode="None" CancelControlID="PopupCancelLink"> </cc1:ModalPopupExtender> <asp:LinkButton ID="hiddenpopupbutton" runat="server">Pop the Window</asp:LinkButton> <asp:Panel Width="400px" CssClass="modalBox" Style="display: none;" ID="PopupPopupDiv" runat="server"> <asp:Panel ID="DragPan" SkinID="PopupDragPanel" runat="server"> <table class="PopupTable"> <tr> <td class="Popup3LeftCell"> <asp:Label SkinID="PopupLeftLabel" ID="Label1" runat="server" text=""></asp:Label> </td> <td class="Popup3CentreCell"> <asp:Label SkinID="PopupClickDragLable" ID="Label3" runat="server" ></asp:Label> </td> <td class="Popup3rightCell"> <asp:LinkButton ID="PopupCancelLink" SkinID="PopupRightLinkClose" runat="server">Close</asp:LinkButton> <asp:Image SkinID="PopupRightImageClose" ID="Image1" runat="server" /> </td> </tr> </table> </asp:Panel> <div id="ytapiplayerPan" style="display:none"> You need Flash player 8+ and JavaScript enabled to view this video. </div> </asp:Panel> <script type="text/javascript"> // <![CDATA[ // allowScriptAccess must be set to allow the Javascript from one // domain to access the swf on the youtube domain var params = { allowScriptAccess: "always", bgcolor: "#cccccc" }; // this sets the id of the object or embed tag to 'myBCWytplayer'. // You then use this id to access the swf and make calls to the player's API var atts = { id: "myBCWytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer? enablejsapi=1&playerapiid=BCWytplayer", "ytapiplayerPan", "400", "300", "8", null, null, params, atts); //]]> </script> <!-- HTML below here is for display of the player info + state --> <div> Player state: <span id="playerstate">--</span> </div> <br /> <a href="javascript:void(0);" onclick="play();">Play</a> | <a href="javascript:void(0);" onclick="pause();">Pause</a> | <a href="javascript:void(0);" onclick="stop();">Stop</a> | <a href="javascript:void(0);" onclick="mute();">Mute</a> | <a href="javascript:void(0);" onclick="unMute();">Unmute</a> <br /><br /> <form action="" onsubmit="seekTo(document.getElementById ('seekto').value); return false;"> <div><input id="seekto" type="text" size="4" /><input type="submit" value="Seek to" /></div> </form> <br /> <div> Duration: <span id="videoduration">--:--</span> | Current Time: <span id="videotime">--:--</span> </div> <br /> <div id="bytesdisplay"> Bytes Total: <span id="bytestotal">--</span> | Start Bytes: <span id="startbytes">--</span> | Bytes Loaded: <span id="bytesloaded">--</span> </div> <br /> <div> <input type="text" size="11" id="loadvideoid" value="u1zgFlCw8Aw" /> <a href="javascript:void(0)" onclick="loadNewVideo (document.getElementById('loadvideoid').value, document.getElementById ('startseconds').value)"><- Load video</a> | Start at: <input type="text" size="4" id="startseconds" value="0" /> </div> <br /> <div> <input id="vol" type="text" size="2" /> <a href="javascript:void(0)" onclick="setVolume (document.getElementById('vol').value)"><- Set Volume</a> | Volume: <span id="volume">--</span> </div> <br /> <div> <input type="text" size="11" id="cuevideoid" value="u1zgFlCw8Aw" /> <a href="javascript:void(0)" onclick="cueNewVideo (document.getElementById('cuevideoid').value, document.getElementById ('startseconds2').value)"><- Cue video</a> | Start at: <input type="text" size="4" id="startseconds2" value="0" /> </div> <br /> <div> <a href="javascript:void(0)" onclick="getEmbedCode()">Get Embed Code</a> | <a href="javascript:void(0)" onclick="getVideoUrl ()">Get Video URL</a> | <a href="javascript:void(0);" onclick="clearVideo()">Clear Video</a> </div> </div> </form> </body> </html> /html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SWFObject" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/swfobject?hl=en -~----------~----~----~----~------~----~------~--~---
