đź”—

Embed Playback on your site

Embedding your Playback room on your own website is easy!

  1. Include the Playback Embed script on your page.
  2. Add an element that will contain the embed.
  3. Initialize the Playback Embed instance using the ID of the container element, your room’s custom URL handle (the part after the slash in the URL), and any styles you want to apply to the embed frame.

Here’s an example using a container element with ID playback-embed and a room called playback.tv/your-room:

<!DOCTYPE html>
<html>
  <head>
    <title>Your Website</title>
  </head>
  <body>
    <!-- Add element to page with playback-embed ID. This is where the embed will be inserted. -->
    <div id="playback-embed" style="height: 960px; width: 960px"></div>

    <!-- Include embed script -->
    <script src="https://www.playback.tv/embed/v1.js"></script>

    <!-- Create a Playback.Embed instance. Make sure to pass it the same ID you used above. -->
    <script type="text/javascript">
      new Playback.Embed("playback-embed", {
        room: "your-room",
        style: { height: "100%", width: "100%" },
      });
    </script>
  </body>
</html>