# Outstream via iframe
Displaying video in Outstream mode with the OutStream SDK makes the Video Player float and resize automatically as the viewer scrolls. The steps are as follows.
# 1. Add an Outstream container
Add a <div> tag where you want the Outstream video to appear, with an id attribute that will be referenced in the next steps.
<div id="outstream-container"></div>
1
# 2. Add the ByteArk OutStream SDK
Add the ByteArk OutStream SDK in a <script> tag in your HTML.
<script src="https://byteark-sdk.cdn.byteark.com/outstream/@latest/byteark-outstream-sdk.min.js"></script>
1
# 3. Initialize the OutStream SDK
Add code to initialize the OutStream SDK on the <div> created in step 1, and specify the contentUrl you want to play. The contentUrl can be found on the Video Detail page in ByteArk Stream under Video Link.
<script>
var sdk = new window.ByteArkOutStreamSDK({
elementId: 'outstream-container', // ID of the element to make float (required)
contentUrl: 'https://stream-player.byteark.com/players/614d5df44a9a7e00b4dc3eb6/videos/U686mpQ72zCw', // URL for iframe src
// position: 'bottom-left', // 'bottom-left' or 'bottom-right' (default: 'bottom-right')
// animation: true, // Enable smooth transitions (default: true)
});
</script>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# OutStream SDK options
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
elementId | String | - | Yes | ID of the HTML element container |
contentUrl | String | - | No | URL of the iframe video player from ByteArk Stream |
position | String | bottom-right | No | Position when the container minimizes while scrolling. One of bottom-left or bottom-right |
animation | Boolean | true | No | Show an animation when the container minimizes |
# Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Create an outstream container div -->
<div id="outstream-container"></div>
<!-- include ByteArk OutStream SDK -->
<script src="https://byteark-sdk.cdn.byteark.com/outstream/@latest/byteark-outstream-sdk.min.js"></script>
<script>
// init ByteArk OutStream SDK
var sdk = new window.ByteArkOutStreamSDK({
elementId: 'outstream-container', // ID of the element to make float (required)
contentUrl: 'https://stream-player.byteark.com/players/614d5df44a9a7e00b4dc3eb6/videos/U686mpQ72zCw', // URL for iframe src
// position: 'bottom-left', // 'bottom-left' or 'bottom-right' (default: 'bottom-right')
// animation: true, // Enable smooth transitions (default: true)
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22