Reference guide on Cloud Video Player SDK for IFrame
You can embed a video player with content from Cloud Video to an HTML page using Cloud 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/{video_content_id}?autoplay=1&mute=1"
></iframe>
Where {video_content_id}
is the video content ID. 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 the video size and playback parameters.
Setting up the video size
To specify your video size, set the following parameters in the iframe
tag: height
for the height and width
for the 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/{video_content_id}"
></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/{video_content_id}?autoplay=1&mute=true"
></iframe>
</div>
</div>
Setting up the playback parameters
Customize your player appearance and video playback using special parameters.
To the embed code URL, after ?
, add parameter=value
pairs separated by &
:
https://https://runtime.video.cloud.yandex.net/player/{video_content_id}?{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: |
|
Automatically play video in mute mode once the player loads:
The |
|
Automatically play video once the player loads:
The default value is For the autoplay option to work correctly in all browsers, use the |
|
Using this parameter, you can hide the player interface elements. All of them are shown by default. List of interface elements
To hide several interface elements, provide a string with 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 defined based on user data. |
|
Video looping:
The default value is |
|
Mute the video once the player loads:
The default value is |
|
Stop the video when the player is not visible on the screen and play the video when it is visible. The parameter affects both video content and ad videos. It can take the following values:
The default value is Note When |
|
Preload the video:
The default value is When |
|
Volume at the player startup. It may take values from If |
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>