If you don't find an answer, please click here to post your question.
Reply
Advisor
Posts: 26
Registered: ‎12-20-2014
Accepted Solution

Mobile responsive Player

We are using Themebuilder player with the thumbnails on the right side.

http://gardentv.tv/category/gardening-all/gardening-101/

The problem is that when the screen size is reduced, the thumbnails remain large and the player gets smaller. 

This because a serious problem on mobile devices, because the player becomes infinitesimal. 

Note that on a mobile device, the player is reduced to a tiny spec on the left side of the 3 thumbnails.

 

I have tried using a fixed width player, but although it prevents the player from scaling, on a mobile device, the player is much too big. I feel like Goldilocks. ;oP

Thanks for your help.


Accepted Solutions
Ooyala Alumni (Retired)
Posts: 53
Registered: ‎04-29-2014

Re: Mobile responsive Player

[ Edited ]

Hi There

I see what you mean and it does not look good with your design. if you would like to take a different approach you can separate the Player and the Pods and style them seperetly

Please refer to the following documentation on how to do this:

 

http://help.ooyala.com/video-platform/concepts/tb_dg_pods_concept.html

 

Here is a simple example on how to do this implementation:

http://ooyala.waves.mx/Charly/playerpods.html

Let us know if you have any more questions or if you continue to have issues please feel free to open a support case so we can address this issue accordingly 

 

 

Thank you

Carlos

Ooyala Technical support

 

View solution in original post


All Replies
Ooyala Alumni (Retired)
Posts: 53
Registered: ‎04-29-2014

Re: Mobile responsive Player

Hello there! 

Thank you for posting your question in our comunity 

In order to achive a fluid design or resposinve design you will need to set the width and height of the player to 0 in the player parameters  please see below example

 

OO.ready(function() {

var playerConfiguration = {

playlistsPlugin: {"data":["4860bf1f61c24ac5bfeaf4d5adbcbc87"]},

autoplay: false,

loop: false,

height: 0,

width: 0,

useFirstVideoFromPlaylist: true

};

Sample Page

http://ooyala.waves.mx/Charly/fluidtestpage.html

This will allow the TB player adjust accordingly to the DIV its embeded to and based on your CSS

Please review and let us know if you have any more questions

Thank you

Carlos C.

Ooyala Technical Support 

 

Advisor
Posts: 26
Registered: ‎12-20-2014

Re: Mobile responsive Player

Thank you for your reply Carlos. The embed code I have selected for the Themebuilder is Fluid (Themebuilder generates the code below when Fluid is selected). The player resizes, as I state in my last post, but the thumbnails on the right stay larger and the player becomes miniscule on a mobile device. 

Can I see your test page with the Thumbnails displayed on the right? 

Then scale it down and see what I mean.  

Try this page and then scale it down: http://gardentv.tv/category/cooking-series/


Fluid Player Themebuilder Code:

<div id="playerContainer" ></div>
<script type="text/javascript" src="https://player.ooyala.com/v3/8fbd7beb04c448808210bb49a4ebafa0"></script>
<script type="text/javascript">
var ooyalaPlayer;

OO.ready(function() {
var playerConfiguration = {
playlistsPlugin: {"data":["b2d4b037d3d8487eb181c50e15428aee"]},
autoplay: false,
loop: false,
height: '',
width: '',
useFirstVideoFromPlaylist: true
};

ooyalaPlayer = OO.Player.create('playerContainer', '', playerConfiguration);
});

</script>

Ooyala Alumni (Retired)
Posts: 53
Registered: ‎04-29-2014

Re: Mobile responsive Player

[ Edited ]

Hi There

I see what you mean and it does not look good with your design. if you would like to take a different approach you can separate the Player and the Pods and style them seperetly

Please refer to the following documentation on how to do this:

 

http://help.ooyala.com/video-platform/concepts/tb_dg_pods_concept.html

 

Here is a simple example on how to do this implementation:

http://ooyala.waves.mx/Charly/playerpods.html

Let us know if you have any more questions or if you continue to have issues please feel free to open a support case so we can address this issue accordingly 

 

 

Thank you

Carlos

Ooyala Technical support

 

Advisor
Posts: 26
Registered: ‎12-20-2014

Re: Mobile responsive Player

Thank you for your reply, Carlos. I see your sample page, but can you show me a sample with the pods on the right side, vertical?
Given the Full width of our player and the height of the container, we don't feel it will look good to have the video player above the thumbnails.

Thanks. Steve