If you don't find an answer, please click here to post your question.
Reply
Highlighted
Occasional Advisor
Posts: 13
Registered: ‎04-09-2015
Accepted Solution

V4 player aspect ratio issue after exiting fullscreen with non-16:9 asset

[ Edited ]

Hi all, the v4 player is looking really nice, great work @ the Ooyala team.

I have an issue with the aspect ratio being modified on the player after going full screen and exiting, that being said.

 

Using your example embed HTML here:

https://help.ooyala.com/video-platform/api/pbv4_api_embedparams.html#pbv4_api_embedparams__skin.inli...

 

My code is:

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>My Test Player V4 Web Page</title>
        <script src="//player.ooyala.com/core/{player_id_omitted}"></script>
    </head>
    <body>
        <div id="container" style="width: 640px; height: 400px;"></div>
        <script>
            OO.ready(function() {
              window.pp = OO.Player.create("container", "{embed_code_omitted}", { 'skin': { 'inline': { 'aspectRatio': '16:9' } } } );
            });
        </script>
    </body>
</html>

 

I have tried with/without the aspectRatio specified, with/without the width/height inline style on the player container.
Same issue every time, player starts off with respect to player container inline style, fullscreen takes it to 16:9 with black bars on the side of a 4:3 video, then when exiting fullscreen the whole player is resized to be 4:3 to match the original asset.


The issue is basically the padding-top that is applied to .innerWrapper.oo-player.
In general inline styles are very annoying to deal with, I feel like I'm battling against your player here.
Surely by specifying the aspect ratio I can 'force' it to use a consistent padding.

 

Also, I don't seem to need to specify the pcode etc. The initial example on your example embed doesn't use it either, but the later examples do - can you please clarify why this is the case?

Thank you for your time.


Accepted Solutions
Ooyalan
Posts: 27
Registered: ‎07-30-2017

Re: V4 player aspect ratio issue after exiting fullscreen with non-16:9 asset

Hi,

 

     Thank you for writing to us. Our player v4, by default, uses the aspect ratio of the video to set the height and width of the player. 

 

This is controlled by {"responsive":{"aspectRatio":"auto"}} which it is at skin.json 

To fix this behavior we need to change that parameter and use a fixed ratio. The default for 16:9 is 56.25. So we will need either overwrite that json line or host our own json.skin and leave it like: {"skin":{"inline":{"responsive":{"aspectRatio":56.25}}

 

Sample Code of mine:


<script src="//player.ooyala.com/static/v4/production/latest/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/bit_wrapper.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/osmf_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"/>

<body>

<div id='container'></div>
<script>
var playerParam = {
'pcode':'JhYWsyOg60EHbVsQnBkmIVwqij_z',
'playerBrandingId':'b0465f7fac5748cfa61e028cb0017c23',
'autoplay':false,
'loop':false,
'skin':{'inline':{'responsive':{'aspectRatio':'56.25'}}}
};
OO.ready(function() {window.pp = OO.Player.create('container', 'B2bjh3YzE61f6bt06uDjCLsIWITrckwd', playerParam);});
</script>

</body>

 

* Above V4 player code is without width and height.

 

Let me know how it goes.

 

Thanks

Ooyala Tech Support

View solution in original post


All Replies
Ooyalan
Posts: 27
Registered: ‎07-30-2017

Re: V4 player aspect ratio issue after exiting fullscreen with non-16:9 asset

Hi,

 

     Thank you for writing to us. Our player v4, by default, uses the aspect ratio of the video to set the height and width of the player. 

 

This is controlled by {"responsive":{"aspectRatio":"auto"}} which it is at skin.json 

To fix this behavior we need to change that parameter and use a fixed ratio. The default for 16:9 is 56.25. So we will need either overwrite that json line or host our own json.skin and leave it like: {"skin":{"inline":{"responsive":{"aspectRatio":56.25}}

 

Sample Code of mine:


<script src="//player.ooyala.com/static/v4/production/latest/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/bit_wrapper.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/osmf_flash.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"/>

<body>

<div id='container'></div>
<script>
var playerParam = {
'pcode':'JhYWsyOg60EHbVsQnBkmIVwqij_z',
'playerBrandingId':'b0465f7fac5748cfa61e028cb0017c23',
'autoplay':false,
'loop':false,
'skin':{'inline':{'responsive':{'aspectRatio':'56.25'}}}
};
OO.ready(function() {window.pp = OO.Player.create('container', 'B2bjh3YzE61f6bt06uDjCLsIWITrckwd', playerParam);});
</script>

</body>

 

* Above V4 player code is without width and height.

 

Let me know how it goes.

 

Thanks

Ooyala Tech Support

Occasional Advisor
Posts: 13
Registered: ‎04-09-2015

Re: V4 player aspect ratio issue after exiting fullscreen with non-16:9 asset

Thank you. That was definitely the missing piece.

The relevant documentation is:

http://apidocs.ooyala.com/player_v4_skin_config/schemas/skin-schema_json.html

https://help.ooyala.com/video-platform/reference/faq_pbv4.html

http://player.ooyala.com/static/v4/production/latest/skin-plugin/skin.json

Didn't help that the Drupal module doesn't handle parameters correctly :P This is still on me though.

Thanks for your time.