Embedding the Viewing Page via iframe

Updated: 2022-05-24 11:43:23

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

Embedding a Standard Live Stream

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 greater to avoid horizontal scrollbars.
On mobile, full-screen embedding is recommended to prevent compatibility issues.

Embedding Cloud Classroom

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>

Embedding Cloud Classroom is similar to standard live streams, but on PC, set the width to 1196px or greater to avoid horizontal scrollbars.
On mobile, full-screen embedding is recommended to prevent compatibility issues.

Configurable Parameter — hasFrame (Applicable to Cloud Classroom)

Setting this to 1 hides the live stream introduction, page menu (page footer), language settings, and the sharing channel info bar on the main player. This is 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, because the page footer is hidden, you can set a fixed height to hide the vertical scrollbar, making the embedded page feel 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 such as https://live.polyv.cn/watch/12345?vid=12345 has the same effect as setting the hasFrame style. The style settings mentioned above can also be referenced.

iframe Permission Settings

Co-hosting (Live Connection)

If co-hosting is required, add the allow attribute to the iframe (add allow="microphone; camera" inside the tag) to allow the iframe to access the camera and microphone. The main domain must also be HTTPS.
The iframe URL must be HTTPS. For local debugging, you can use localhost access, 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.

Important Notes

When using Custom Authorization or External Authorization, embed the viewing page using the HTTPS protocol.
The iframe does not support Direct (Independent) Authorization.
White screen issue when entering the iframe viewing page on Android WeChat: The viewing page will go through WeChat's authorization by default on WeChat to obtain the viewer's avatar and nickname. To use the iframe viewing page link, it must be combined with External Authorization or Custom Authorization; otherwise, it will display a white screen on Android WeChat.
Page shaking issue on Android WeChat: Remove the default border of the iframe tag.
The iframe does not support features involving payments, such as tipping, red packets, etc.

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

For more iframe settings, refer to iframe Settings Reference

POLYV Help Center