Iframe control boundary

On a narrow screen, swipe the diagram horizontally to keep its labels readable.

Architecture and example verified

react-youtube is a thin React layer over the YouTube IFrame Player API. videoId identifies the content; opts carries player options; onReady supplies the API target. Use a properly sized player and the correct origin when configuring the underlying API.

Focused lesson embed synthesis

// Illustrative; onReady is the safe place to access the player.
import YouTube from "react-youtube";
export function Intro({ videoId }) {
  return <YouTube videoId={videoId}
    opts={{ width: "100%", playerVars: { playsinline: 1 } }}
    onReady={(event) => event.target.pauseVideo()}
    onError={(event) => console.error("youtube", event.data)} />;
}

Decision and boundary synthesis

For an onboarding page that only embeds approved YouTube videos, a focused wrapper keeps the provider model visible. The trade-off is dependence on provider availability, controls and policies. A parent app cannot freely inspect the iframe DOM or impose its own DRM.

Pitfall → improvement synthesis

Do not build course completion from a single client onEnd callback. Treat it as a UI hint, combine progress signals with your application policy, and provide a failure state for unavailable or blocked embeds. For sensitive media, use a delivery model whose access you control.