split out embeddable player doc

developers/guides/embed-a-player.mdx

@@ -0,0 +1,73 @@
+---
+title: "Embed a player"
+description: "Learn how to embed the Livepeer Player in your application"
+---
+
+In this guide, we demonstrate how to embed asset or live streams in your
+application using a hosted version of the Livepeer Player.
+
+<Warning>
+  If you are using React, consider using Livepeer React instead.
+</Warning>
+
+This is one of the easiest way to play back a video or livestream on your
+website/applications. You can embed the player on your website/applications by
+using the below code snippet.
+
+You can replace the `PLAYBACK_ID` with your video's playback id.
+
+```html
+<iframe
+  src="https://lvpr.tv?v={PLAYBACK_ID}"
+  allowfullscreen
+  allow="autoplay; encrypted-media; picture-in-picture"
+  sandbox="allow-same-origin allow-scripts"
+>
+</iframe>
+```
+
+## Low Latency
+
+For livestreams, you may also specify `&lowLatency=true` in the query string -
+this will enable livestreams to play back with low-latency WebRTC. If this does
+not succeed in playing back (commonly due to a slow network or connectivity
+issues), the embeddable player will automatically fall back to HLS playback.
+Also, if the stream contains B-frames (or bidirectional frames, which are common
+for users streaming with OBS or other streaming apps), the Player will
+automatically fall back to HLS, so that out-of-order frames are not displayed.
+This only applies to users who are playing livestreams.
+
+<Warning>
+  OBS users should be instructed to use the Livepeer Studio stream profile, or
+  to manually turn off B-frames in their stream. See our [Stream from
+  OBS](/developers/guides/stream-via-obs) docs for more information.
+</Warning>
+
+## Clipping
+
+To enable clipping, `&clipLength={seconds}` can be passed, which will allow
+viewers to clip livestreams. The length in seconds **must be less than 120
+seconds**.
+
+## Constant Playback
+
+The embed supports "constant" playback with `constant=true`, which means that
+audio will not be distorted if the playhead falls behind the livestream. This is
+usually used for music applications, where audio quality/consistency is more
+important than latency.
+
+## Other Configs
+
+You can also override the default `muted` and `autoplay` behavior with
+`&muted=false` and/or `&autoplay=false`. These are set to true by default.
+Looping can also be set with `&loop=true`.
+
+<iframe
+  src="https://lvpr.tv/?v=f5eese9wwl88k4g8"
+  frameborder="0"
+  width="100%"
+  height="410"
+  webkitallowfullscreen
+  mozallowfullscreen
+  allowfullscreen
+/>

developers/guides/playback-a-livestream.mdx

@@ -37,8 +37,8 @@ We
 ### Play Video
 
 Now that our providers are set up, we use the
-[`Player`](/sdks/livepeer-react/Player) with an IPFS CID as our `playbackId`, which
-we created previously when uploading a video asset and
+[`Player`](/sdks/livepeer-react/Player) with an IPFS CID as our `playbackId`,
+which we created previously when uploading a video asset and
 [storing to IPFS](/sdks/livepeer-react/asset/useUpdateAsset). We use
 [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) as
 our optimized poster image, but this could also be a simple image URL.
@@ -268,49 +268,6 @@ Here is an example of how to use the playback URL in video.js player.
 
 ## Embeddable Player
 
-<Warning>
-  The embeddable player is currently in beta and some elements may change as we
-  mature the product. For a production-grade application consider using
-  Livepeer React instead.
-</Warning>
-
-This is one of the easiest way to play back a video on your
-website/applications. You can embed the player on your website/applications by
-using the below code snippet.
-
-You can replace the `PLAYBACK_ID` with your video's playback id.
-
-```html
-<iframe
-  src="https://lvpr.tv?v={PLAYBACK_ID}"
-  allowfullscreen
-  allow="autoplay; encrypted-media; picture-in-picture"
-  sandbox="allow-same-origin allow-scripts"
->
-</iframe>
-```
-
-You may also specify `&lowLatency=true` in the query string - this will enable
-livestreams to play back with low-latency WebRTC. If this does not succeed in
-playing back (commonly due to a slow network or connectivity issues), the
-embeddable will automatically fall back to HLS playback. Also, if the stream
-contains B-frames, or bidirectional frames, (which are common for users
-streaming with OBS or other streaming apps), the Player will automatically fall
-back, so that out-of-order frames are not displayed. This only applies to users
-who are playing back livestreams.
-
-<Warning>
-  OBS users should be instructed to use the Livepeer stream profile, or to
-  manually turn off B-frames in their stream. See our [Stream from
-  OBS](/developers/guides/stream-via-obs) docs for more information.
-</Warning>
-
-<iframe
-  src="https://lvpr.tv/?v=f5eese9wwl88k4g8"
-  frameborder="0"
-  width="100%"
-    height="410"
-
-webkitallowfullscreen mozallowfullscreen allowfullscreen
-
-> </iframe>
+Livepeer Studio maintains an
+[embeddable version of the Livepeer Player](/developers/guides/embed-a-player) that is suitable
+for iframing or similar embeddings. See the guide for more details.

developers/guides/playback-an-asset.mdx

@@ -37,8 +37,8 @@ We
 ### Play Video
 
 Now that our providers are set up, we use the
-[`Player`](/sdks/livepeer-react/Player) with an IPFS CID as our `playbackId`, which
-we created previously when uploading a video asset and
+[`Player`](/sdks/livepeer-react/Player) with an IPFS CID as our `playbackId`,
+which we created previously when uploading a video asset and
 [storing to IPFS](/sdks/livepeer-react/asset/useUpdateAsset). We use
 [Next.js Image](https://nextjs.org/docs/basic-features/image-optimization) as
 our optimized poster image, but this could also be a simple image URL.
@@ -237,52 +237,6 @@ Here is an example of how to use the playback URL in video.js player.
 
 ## Embeddable Player
 
-This is one of the easiest way to play back a video on your
-website/applications. You can embed the player on your website/applications by
-using the below code snippet.
-
-You can replace the `PLAYBACK_ID` with your video's playback id.
-
-```html
-<iframe
-  src="https://lvpr.tv?v={PLAYBACK_ID}"
-  allowfullscreen
-  allow="autoplay; encrypted-media; picture-in-picture"
-  sandbox="allow-same-origin allow-scripts"
->
-</iframe>
-```
-
-You may also specify `&lowLatency=false` in the query string - this will disable
-low-latency WebRTC. This is enabled by default - if low latency does not succeed
-in playing back (commonly due to a slow network or connectivity issues), the
-embeddable player will automatically fall back to HLS playback. Also, if the
-stream contains B-frames, or bidirectional frames, (which are common for users
-streaming with OBS or other streaming apps), the Player will automatically fall
-back, so that out-of-order frames are not displayed. This only applies to users
-who are playing back livestreams.
-
-To enable clipping, `&clipLength={seconds}` can be passed, which will allow
-viewers to clip livestreams. The length in seconds **must be less than 120
-seconds**.
-
-Also, the embed supports "constant" playback with `constant=true`, which means
-that audio will not be distorted if the playhead falls behind the livestream.
-This is usually used for music applications, where audio quality/consistency is
-more important than latency.
-
-<Warning>
-  OBS users should be instructed to use the Livepeer stream profile, or to
-  manually turn off B-frames in their stream. See our [Stream from
-  OBS](/developers/guides/stream-via-obs) docs for more information.
-</Warning>
-
-<iframe
-  src="https://lvpr.tv/?v=f5eese9wwl88k4g8"
-  frameborder="0"
-  width="100%"
-    height="410"
-
-webkitallowfullscreen mozallowfullscreen allowfullscreen
-
-> </iframe>
+Livepeer Studio maintains an
+[embeddable version of the Livepeer Player](/developers/guides/embed-a-player) that is suitable
+for iframing or similar embeddings. See the guide for more details.