Embedding a live channel, properly

The code

Each channel page has an Embed this channel block with a complete iframe you can copy. It points at a dedicated lightweight player page — no site chrome, no analytics of yours, no navigation — sized at 16:9 by default.

Making it responsive

A fixed width and height iframe will overflow on a phone. Wrap it so the aspect ratio does the work:

• Put the iframe in a container with position:relative and aspect-ratio:16/9.
• Give the iframe position:absolute; inset:0; width:100%; height:100%; border:0.
• Keep allowfullscreen and the allow attribute, or fullscreen and picture-in-picture stop working.

What you must keep

The embed plays the broadcaster's own stream through the broadcaster's own player. Do not strip the player, do not proxy the manifest, and do not present the channel as your own content. Those are the conditions under which this is legitimate rather than a rebroadcast.

What can break it

• A channel going off air — the embed stays valid, the picture does not.
• A broadcaster changing its stream URL. The embed page follows the catalogue, so it recovers on the next update; a hard-coded manifest in your own page does not.
• A strict Content-Security-Policy on your site. You will need to allow the frame source explicitly.

Attribution

Not required, appreciated. A link back to the channel page gives your readers the live status, the category and the alternatives when the channel is off air.