Embed Video Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Embed button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same EmbedFields component and share the block's state, so a link pasted in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

By pattern, with no request. YOUTUBE accepts watch, embed, shorts and youtu.be addresses with an eleven-character id, VIMEO accepts vimeo.com addresses with a numeric id, and anything else is "Not a video link". The detected line is a polite live region in one reserved slot, so it is read out when the kind changes without moving the options. To support another service, add its pattern, its mark and its player address to kindOf and srcOf.

The player address and the poster. Autoplay sets autoplay and mute together, since browsers only autoplay muted video. Show controls sets the controls parameter, Loop sets loop and, for YouTube, the playlist parameter it needs, and Start at turns minutes and seconds into a start time in seconds. A start time that isn't written as 1:05 shows its problem under the link and keeps the dialog open when you try to insert.

Nothing loads: no iframe is created, no request is made, and the sample ids are placeholders. Insert into page puts a drawn video block with the link as its caption into the drawn page and says in a polite message that nothing was loaded. Copy writes the real clipboard. In your app store the link and options in your page model in insert, render the iframe with the same srcOf address, and consider a privacy-friendly player address and a consent step before any player loads.

Yes. Focus starts in the link field, the samples, switches and fields are real controls with names, and the code box is a focusable region you can scroll with the arrow keys. A problem is read out where it appears and puts focus back in the field. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Focus returns to Embed when the dialog closes.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Insert into page on top. The poster comes first, then the link and the options in two columns, and the code box last; all of it scrolls above the actions. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.