V4 iframe. Possible to modify appearance with skin.json properties?

[saviobhong]

I'm using an iframe to video play videos on a site. I have autoplay set to true. 

The problem is that as the video loads, the play button appears for a split second before the video starts playing. It makes for a bit of an ugly experience in our use case. 

You can turn off the play button via a skin.json property: http://apidocs.ooyala.com/player_v4_skin_config/schemas/skin-schema_json.html

Is there anyway to achieve this using parameters passed via the iframe src url? Or some other way when using an iframe?

[ddidenko]

Hello,

My name is Dmytro and I am part of the Ooyala Technical Support team. I will gladly assist you with this issue.

The most suitable solution for your case is to pass the custom skin.json file hosted on your server as a parameter skin.config for an iframe.

Here is an example of how it might look like:

<iframe width=640 height=480 src="//player.ooyala.com/static/v4/production/latest/skin-plugin/iframe.html?ec=<embed_code>&pbid=<player_branding_id>&pcode=<your pcode>&autoplay=true&skin.config=<path_to_your_skin.json>" frameborder="0" allowfullscreen></iframe>

In turn, in your custom skin.json you'd need to change the following part:

"startScreen": {
...
"showPlayButton": false,
...
}

Please let me know if you have any further questions on that matter.

---
Regards,
Dmytro Didenko
Ooyala Technical Support Engineer

[mndonx]

Hi ddidenko - I'm having the same problem as well. I have an embed URL like:

https://player.ooyala.com/static/v4/production/latest/skin-plugin/iframe.html?ec=<my-ec>&pbid=<my-pbid>&pcode=<my-pcode>&skin.config=/path/to/my/skin.json

The video loads in the iframe, but the skin does not. I've seen other variations like: 

&options[skin.config]=/path/to/my/skin.json

Also, should this work for <amp-iframe> elements as well? 

[ddidenko]

Hi mndonx,

The first iframe structure you've mentioned is correct. I've just checked in my test environment and it works as expected.

The reason for the issue on your side might due to the custom skin.json not being downloaded properly from the source. Please check the browser's network logs for that issue.

Regards,

Dmytro

[mndonx]

Thanks ddidenko! I've got it working, but now I'm getting a CORS error:

Access to XMLHttpRequest at 'https://example.com/path/to/ooyala-skin.json' from origin 'https://player.ooyala.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My localhost is using https, so that is not the issue.