Play-button and home screen styles

Play-button and home screen styles

You can adjust the play-button and home screen style displayed at the beginning of the video through the parameters in the embed code. This allows you to change both the color of the play button, and the opacity of the overlay. 

What are parameters?

A parameter is a variable that is added to the URL in the form of a querystring. Parameters exist in a range of categories and can activate many different functions. It is possible to add multiple parameters at once. This is done in the following way:

?parameter1=value1&parameter2=value2&parameter3=value3

The first parameter always starts with a ‘?’ sign. Following parameters are separated by an ‘&’ sign.


Style options

Overlay opacity

Parameter: iv_player_overlay_opacity

Value: 0 – 100

Example: iv_player_overlay_opacity=90

The value indicates the opacity of the dark layer. A value of 0 indicates complete transparency, while a value of 100 indicates a completely black overlay. 


Play-button color

Parameter: iv_player_playbutton_color

Value: 33AA33 (hexadecimal colorcode)

Example: iv_player_playbutton_color=33AA33


Apply to the embed code

The parameters are activated by adding them to the URL in the embed code. Example of code:

  1. <div style=”width:100%;position:relative;padding-top:56.25%;”><iframe
  2. src=”https://projects.ivory.studio/embed/projects/6T5YKI6xkyQLeUff?
  3. iv_player_overlay_opacity=90&iv_player_playbutton_color=33AA33”
  4. style=”border:0;width:100%;height:100%;position:absolute;top:0px;bottom:0px;right:0px;left:0px;”
  5. allowfullscreen></iframe></div>




    • Related Articles

    • Autoplay on screen rotation

      Rotate device component When you have created an interactive video, you might want to force viewers to watch the video on a rotated device. This might enhance the viewing experience. Ivory Studio allows you to force viewers to just this by way of the ...

    • Creating buttons

      A button component is an add-in that allows you to easily add buttons to an interactive video. In the example below we show different button component styles. These are only examples of the varieties of styles. The style of a button component is ...

    • Sending a WhatsApp message from a video

      Send a WhatsApp message from a video How cool is that! You can now send a WhatsApp message directly from a video. 1. Create an interaction You can set up an interaction on any component. Click on the blue ‘plus’ to create the interaction 2. Select ...

    • Move element interaction

      You can have users change the position of elements by way of interaction. Use the ‘Move element(s)’ interaction to do so. You can use this function, among other things, for: Gamification of a video Moving information on or off the screen Switchable ...

    • Animate using keyframes

      Keyframes are the set-up positions of elements on their specific moments on the timeline. By using more than one keyframe, it is possible to linearly animate elements. Working with keyframes allows you to have elements move over the screen on the ...