[Yandex Cloud documentation](../../index.md) > [Yandex Cloud Video](../index.md) > Tutorials > Out-of-the-box solutions for video design in IFrame
# Out-of-the-box video layout solutions in IFrame
This guide offers examples of [video player](../concepts/player.md) 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:
1. Upload a video to [Yandex Cloud Video](../hosting.md).
1. Save the link to the video.
1. Add the [iframe embedding code](../sdk/iframe/index.md) to your HTML page code.
1. 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:
{% list tabs group=instructions %}
- Cloud Video UI {#console}
1. Open the Cloud Video [home page](https://video.yandex.cloud/).
1. Select a channel.
1. In the  **Video** tab, select a video.
1. [Set up](../operations/video/update.md) the video.
1. Copy the iframe embedding code on the **html** tab in the **Past code** section.
1. Add the iframe embedding code to your HTML page code.
1. To provide the video as a URL, copy the link content with settings on the **link** tab.
{% endlist %}
## Muted autoplay {#mute}
{% note info %}
Video autoplay may be restricted by browser policies. For more information, see [Browser autoplay policy](../autoplay-policy.md).
{% endnote %}
```html
```
Where:
* `Where ` 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.
{% cut "Example" %}
{% endcut %}
## Looped autoplay {#automatically-loop}
```html
```
Where:
* `Where ` 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.
{% cut "Example" %}
{% endcut %}
## Autoplay with hidden UI elements {#autoplay-hidden-elements}
```html
```
Where:
* `Where ` 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.
{% cut "Example" %}
```
Where:
* `Where ` 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=timeline,mobileSeekButtons,timelinePreview`: Hides the timeline, its preview, and rewind and fast forward buttons in the mobile interface.
{% note info %}
Due to the specifics of the iPhone platform, rewinding will still be available in full-screen mode. To completely disable rewinding on iPhone, you need to hide the full-screen button (`fullscreen`) and disable the picture-in-picture (PiP) mode by removing `picture-in-picture` from the `allow` attribute.
{% endnote %}
{% cut "Example" %}
{% endcut %}
## Setting up player widgets {#widgets}
```html
```
Where:
* `width`: Player section width.
* `height`: Player section height.
* `Where ` 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.
{% cut "Example" %}
{% endcut %}
## Configuring a video for a product card {#product_card}
For a product card, you want your video autoplayed when visible, on mute, and without controls.
```html
```
Where:
* `frameborder`: Player section frame width.
* `Where ` 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.
{% cut "Example" %}
{% endcut %}
## Recommending other videos {#playlist_settings}
Use the [playlist](../concepts/playlists.md) feature to recommend other videos on the same topic at the end of the video:
1. Upload several videos to [Yandex Cloud Video](../hosting.md).
1. [Create a playlist](../operations/playlists/create.md) and add the videos to it.
1. Save the link to the playlist.
1. Add the [iframe embedding code](../sdk/iframe/index.md) to your HTML page code.
1. Copy the iframe embedding code from the example with the link to your playlist added to it.
{% note info %}
The player section must be big enough to display the playlist.
{% endnote %}
```html
```
Where:
* `frameborder`: Player section frame width.
* `width`: Player section width.
* `height`: Player section height.
* ``: 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 [Style parameters](../sdk/iframe/initialization.md#styling).
{% cut "Example" %}
{% endcut %}