Video player SDK for IFrame reference
You can embed a video player with content from Cloud Video in an HTML page using the video player SDK for IFrame.
Add an iframe
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=1"
></iframe>
Where https://runtime.video.cloud.yandex.net/player/...
is a link to playable content, e.g., https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y
. For more information, see Getting an embed code or link to a video and Getting an embed code or link to a broadcast.
The embed code contains an iframe container that shows the player with the specified video.
You can also set up video size and the player startup options.
Setting up video size
To specify video size, set the following parameters in the iframe
tag: height
for height and width
for width.
Example:
<iframe width="560" height="315"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/..."
></iframe>
To adjust the video to the container width, change the embed code as follows:
<div style="min-width: 100%">
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/...?autoplay=1&mute=true"
></iframe>
</div>
</div>
Setting up the player startup options
Customize your player appearance and video playback using special parameters.
Add parameter=value
pairs separated by &
to the embed code URL after ?
:
https://runtime.video.cloud.yandex.net/player/...?{param1=value1}&...&{paramN=valueN}
You can see the list of parameters and their possible values in the table below. If you do not specify the parameters, the player will start with default parameters.
Parameter: |
Description: |
|
Auto video playback in mute mode at startup:
The |
|
Auto video playback at startup:
The default value is For the autoplay option to work correctly in all browsers, use the |
|
With this parameter, you can hide the player's interface elements. All of them are shown by default. List of interface elements
To hide several interface elements, provide a string of comma-separated values, e.g., |
|
Player interface language. List of languages
If you do not specify the parameters or provide an unsupported value, the player interface language will be based on user data. |
|
Playback looping:
The default value is |
|
Mute at startup:
The default value is |
|
Stopping playback if the player leaves the visible area and starting playback if the player is in it. The parameter affects both video content and ads. It can take the following values:
The default value is Note When set to |
|
Video preload:
The default value is When set to |
|
Volume at startup. The values range from If set to |
Example
This example shows the video autoplay in muted mode:
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y?autoplay=1&mute=true"
></iframe>