How do I resolve an issue with modalpopupextender

See more:

Ajax

I have the following snippet on my aspx page:

<td>
   <asp:DropDownList ID="ddlChildOrder" runat="server"></asp:DropDownList>
     
   <asp:Button ID="btnBullets" runat="server" Text="Bullets" />
   <asp:Button ID="btnLinks" runat="server" Text="Links" />
   <asp:Button ID="btnText" runat="server"  OnClick="btnText_OnClick" Text="Text" />
   <asp:Button ID="btnVideos" runat="server"   Text="Videos" />
   <ajx:ModalPopupExtender ID="ModalPopupVideo" PopupControlID="panelVideo"
                      TargetControlID="btnVideos" CancelControlID="btnCloseVideoPanel"
                      BackgroundCssClass="modalBackground" runat="server" />
</td>

and the panel it should popup is further down on the page:

asp:Panel Width="1500" Height="250" ID="panelVideo"  runat="server">
     <div class="modal-content">
        <div class="modal-header">
           <asp:Button ID="btnCloseVideoPanel" Text="X" CssClass="closeWin"  runat="server" />
     <h2>
       <asp:Label ID="lblTitle" Text="Videos" runat="server"></asp:Label>
     </h2>
     </div>
.....

why an I getting this error?
TargetControlID of '' is not valid. The value cannot be null or empty.

the property is assigned to an existing button., In fact intellisense for the property listed it as an option

What I have tried:

So much googling my brain hurts