Out-of-the-box video layout solutions in IFrame
Written by
Updated at November 28, 2025
This guide offers examples of video player layouts you can choose from based on the purpose of your video. Pick one of the options and customize it as needed.
To use the examples to configure a video in IFrame:
- Upload a video to Yandex Cloud Video.
- Save the link to the video.
- Add the iframe embedding code to your HTML page code.
- Copy the iframe embedding code from the example with the link to your video added to it.
If you want your video provided as a URL, copy its properties after ? from the src field in the example.
You can configure some of the video player parameters in the Cloud Video interface:
Cloud Video UI
- Open the Cloud Video home page.
- Select a channel.
- In the Video tab, select a video.
- Set up the video.
- Copy the iframe embedding code on the html tab in the Past code section.
- Add the iframe embedding code to your HTML page code.
- To provide the video as a URL, copy the link content with settings on the link tab.
Muted autoplay
Note
Video autoplay may be restricted by browser policies. For more information, see Browser autoplay policy.
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock"
src="<link>?autoplay=1&mute=true">
</iframe>
Where:
Where <link>is a link to playable content, e.g.,https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.autoplay=1: Automatically starts video playback at player startup.mute=true: Mutes the video.
Example
Looped autoplay
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
src="<link>?autoplay=1&loop=true">
</iframe>
Where:
Where <link>is a link to playable content, e.g.,https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.autoplay=1: Automatically starts video playback at player startup.loop=true: Loops playback.
Example
Autoplay with hidden UI elements
<iframe
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
src="<link>?autoplay=1&hidden=*,!time,!sound">
</iframe>
Where:
Where <link>is a link to playable content, e.g.,https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.autoplay=1: Automatically starts video playback at player startup.hidden=*,!time,!sound: Hides all player UI elements except for current time and the mute/unmute button.
Example
Setting up player widgets
<iframe
width="560" height="315"
frameborder="0"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
src="<link>?player_color=yellow&autoplay=0&player_border_radius=10">
</iframe>
Where:
width: Player section width.height: Player section height.Where <link>is a link to playable content, e.g.,https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.player_color: Sets the colors of player UI elements.player_border_radius: Rounds the player section corners.
Example
Configuring a video for a product card
For a product card, you want your video autoplayed when visible, on mute, and without controls.
<iframe
frameborder="10"
scrolling="no"
allowfullscreen
allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
src="<link>?loop=true&allow_muted=true&play_on_visible=true&hidden=*">
</iframe>
Where:
frameborder: Player section frame width.Where <link>is a link to playable content, e.g.,https://runtime.video.cloud.yandex.net/player/video/vplvmyqsxi7dlwndvb4y.loop=true: Loops playback.allow_muted=true: Autoplays video on mute.play_on_visible=true: Video is played back only if visible.hidden=*: Hides all player UI elements.
Example
Recommending other videos
Use the playlist feature to recommend other videos on the same topic at the end of the video:
- Upload several videos to Yandex Cloud Video.
- Create a playlist and add the videos to it.
- Save the link to the playlist.
- Add the iframe embedding code to your HTML page code.
- Copy the iframe embedding code from the example with the link to your playlist added to it.
Note
The player section must be big enough to display the playlist.
<iframe
frameborder="0"
width="300" height="400"
scrolling="no"
allow="autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture;"
src="<link_to_playlist>?autoplay=0&mute=0&background_color=ffeaea&widget_text_color_primary=841327&playlist_selected_item_background_color=FF8EA2&player_border_radius=10&playlist_item_border_radius=5">
</iframe>
Where:
frameborder: Player section frame width.width: Player section width.height: Player section height.<link_to_playlist>: Link to the playlist, e.g.,https://runtime.strm.yandex.ru/player/playlist/vplqibh5xiq5c45ij777.autoplay=0: Auto playback off.mute=0: Sound on.- Style parameters:
background_color=ffeaea: Background color of the player and widgets.widget_text_color_primary=841327: Widget body text color.playlist_selected_item_background_color=FF8EA2: Background color of the active playlist element.player_border_radius=10: Rounding of the player section corners.playlist_item_border_radius=5: Rounding of the playlist element corners.
Learn more about style parameters in Configuring the video player options.