This way
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<asp:TextBox ID="txtUrl" runat="server" Width="300" Text='<%# Eval("Url") %>' />
<asp:Button ID="btnShow" runat="server" Text="Play Video" OnClientClick="return ShowModalPopup(this)" />
</ItemTemplate>
</asp:DataList>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Youtube Video
</div>
<div class="body">
<iframe id="video" width="420" height="315" frameborder="0" allowfullscreen></iframe>
<br />
<br />
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="return HideModalPopup();" />
</div>
</asp:Panel>
<script type="text/javascript">
function ShowModalPopup(b) {
var url = $(b).closest("tr").find("[id*=txtUrl]").val();
url = url.split('v=')[1];
$get("video").src = "//www.youtube.com/embed/" + url
$find("mpe").show();
return false;
}
function HideModalPopup() {
$get("video").src = "";
$find("mpe").hide();
return false;
}
</script>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("Url") });
dt.Rows.Add("https://www.youtube.com/watch?v=cWuvnc6u93A");
dt.Rows.Add("https://www.youtube.com/watch?v=gvQNp1NMg5Q");
DataList1.DataSource = dt;
DataList1.DataBind();
}
}