Embedding the Viewing Page via iframe

Updated: 2024-04-24 13:32:02

To quickly deploy the Polyv live stream under your own domain, you can simply embed the Polyv viewing page using an iframe.

Embedding Pure Video

Example code (full-screen embed, will occupy the entire browser window)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>普通直播iframe demo</title>
  <style>
  /* 将根元素占满浏览器 */
    html,body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    iframe {
      margin: 0 auto;
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<!-- 将 "{{频道号}}" 更换为具体频道号 -->
  <iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true"></iframe>
</body>
</html>

On PC, try to set the iframe width to 1024px or larger to avoid horizontal scrollbars.
On mobile, full-screen embedding is recommended to prevent compatibility issues.

Embedding a Page Without Chat Room

If you need a page without a chat room and only the player, use the specific link:

<iframe src="https://s1.videocc.net/live-only-video/polyv-live-video.html?uid={{直播账号ID}}&vid={{频道号}}" frameborder="0" allowfullscreen="true"></iframe>

Embedding Document + Video

Example code (full-screen embed, will occupy the entire browser window)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>云课堂iframe demo</title>
  <style>
    /* 将根元素占满浏览器 */
    html,body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    iframe {
      margin: 0 auto;
      display: block;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- 将 "{{频道号}}" 更换 -->
  <iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true"></iframe>
</body>
</html>

Cloud classroom embedding is similar to regular live streaming, but on PC, set the width to 1196px or larger to avoid horizontal scrollbars.
On mobile, full-screen embedding is recommended to prevent compatibility issues.

Configurable Parameter — hasFrame (Applicable to Document + Video)

Setting this to 1 hides the live stream introduction, page menu (page bottom), language settings, and the sharing channel info bar on the main player. Suitable for partial iframe embedding. Example code

  <iframe src="https://live.polyv.cn/watch/12345?hasFrame=1" frameborder="0" allowfullscreen="true"></iframe>

After setting hasFrame=1, since the page bottom is hidden, you can set a fixed height to hide the vertical scrollbar, making the embedded page appear more like native code.

iframe {
      margin: 0 auto;
      display: block;
      width: 100%;
      height: 718px;
    }

  @media (min-width: 1500px) {
    iframe {
      height: 824px;
    }
  }

Embedding a backend replay URL like https://live.polyv.cn/watch/12345?vid=12345 produces a similar effect to setting the hasFrame style. You can also refer to the style settings above.

Other Permission Settings

Live Co-hosting (Mic Connection)

If mic connection is needed, add the allow attribute to the iframe (include allow="microphone; camera" in the tag) to allow the iframe to access the camera and microphone. The main domain must also use HTTPS.
The iframe URL must be HTTPS. For local debugging, you can use localhost, which is not restricted by protocol.

  <iframe src="https://live.polyv.cn/watch/{{频道号}}" frameborder="0" allowfullscreen="true" allow="microphone; camera"></iframe>

Fullscreen

To allow fullscreen, add the attribute allowfullscreen="true"; otherwise, the iframe cannot enter fullscreen mode.

Notes

1. When using custom authorization or external authorization, embed the viewing page via HTTPS.
2. White screen on Android WeChat when entering iframe viewing page: The viewing page defaults to WeChat authorization on WeChat to obtain the viewer's avatar and nickname. To use the iframe viewing page link, combine it with external or custom authorization conditions; otherwise, it will display a white screen on Android WeChat.
3. Page shaking on Android WeChat: Remove the default border of the iframe tag.
4. iframe does not support tipping, red packets, or other payment-related features.

<iframe src="https://live.polyv.cn/watch/{{频道号}}" style="border:0"></iframe>

For more iframe settings, refer to iframe Settings Reference

Live Streaming Products