An iframe embeds another document or web resource inside a page. In a robot control interface, it can isolate snack-selection requests from a live video stream so submitting a choice does not refresh the page or interrupt playback. section 11.4.3 section 11.5
Use an iframe when separate page content must operate inside a larger application:
- Place the live stream in an img element and load the interactive snack list at /items inside an iframe. section 11.4.3
- Keep selection requests inside the iframe so the surrounding page and its video playback remain active. section 11.4.3
- Style the iframe with full width, a 300-pixel height, and no border to fit the application layout. section 11.4.2
<body>
<h1><a href='/'>Snack Pusher</a></h1>
<img src="http://{{request.host_name}}:9000/" alt="camera"><br>
<iframe src="/items"></iframe>
</body>
</html>
A compact HTML template places the camera stream above an iframe whose src points to the snack-selection page. section 11.4.3
iframe {
width:100%;
height:300px;
border:none;
}
This CSS rule makes the embedded page span the available width, gives it a fixed height, and removes its border. section 11.4.2
