Here is a minimal html file that would display a teachers vdo.ninja steam inside a frame.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Teacher Stream</title> <style> /* Fill the available frame width; maintain 16:9 */ html, body { margin: 0; padding: 0; background: #000; } .wrap { width: 100%; } .video { position: relative; width: 100%; aspect-ratio: 16 / 9; /* modern browsers */ background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .bar { font: 14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding: 8px 10px; background: #111; color: #eee; display: flex; justify-content: flex-end; gap: 10px; } .bar a { color: #9cf; text-decoration: none; } .bar a:hover { text-decoration: underline; } </style> </head> <body> <div class="wrap"> <!-- Replace STREAM_ID and PASS with your values --> <!-- cleanoutput keeps UI minimal; you can add &mutespeaker if you want it silent by default --> <div class="video"> <iframe src="https://vdo.ninja/?view=STREAM_ID&password=PASS&cleanoutput" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen referrerpolicy="no-referrer" ></iframe> </div> <div class="bar"> <a href="https://vdo.ninja/?view=STREAM_ID&password=PASS&cleanoutput" target="_blank" rel="noopener noreferrer" >Open full screen</a> </div> </div> </body> </html>