Showing results for 
Search instead for 
Do you mean 
If you don't find an answer, please click here to post your question.
Reply
Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Ooyala Playlist Thumnail

We have created a playlis using 2 videos and associated it with a particular Player id. The playlist is working fine, but we need to hide the playlist thumnail coming from ooyala. Is there a setting by which we can hide the playlist thumnail for the playlist video player. When the 'PODS' setting from Theme Builder is kept none then its hiding the thumnails, but after doing the same we are unable to associate any playlist with the video player.

 

Can some one please help us on this. 

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

Re: Ooyala Playlist Thumnail

Hello exelonpatch

 

There currently is no seeting for hidding the 'PODS' for the Theme builder playlist, if you wish to hide them you can acomplish this by using CSS and hide the class="oo-playlists-thumbnails" for an example, or depending on what you want to achive you can use CSS to your liking

 

You can also consider using the Channels function in backlot if you wish to auto play a set of videos you have previously selected

 

Best

Carlos Castro

Ooyala Technical Support

Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Re: Ooyala Playlist Thumnail

I have tried applying the javascript for dynamically injecting the CSS on page load.

But it's not able to hide the playlist thumbnail, since the DOM is getting created before the thumnails are appearing on the page.

 

The CSS trick does works. :-)

Thanks so much!!

 

Just to let you know I am creating this playlist for mobile device keeping the 'autoplay:true', the thumnails were appearing on top of the player till now, Once I able to hide the thumnail, I am not able to tap properly on the video player? Also the autoplay for playlist is not working in mobile.

 

Can you please help me with the same.

 

Thanks!!

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

Re: Ooyala Playlist Thumnail

[ Edited ]

Hello exelonpatch

 

there are 2 parts to your issue

 

1.- autoplay on mobile devices. this is currently not supported, you can reference this on the following documentation

http://help.ooyala.com/video-platform/reference/player_v3_dev_autoplay.html

 

2.-The pods are appearing on top of the player. this is not expected , since all the elements of the player load in html5 there could be a CSS rule you are using that may be adjusting the pods to be above the player, also the behavior of not being able to tap the player is not expected

 

You can see in the following examples how Theme Builder works without issue on a mobile device

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

 

And if I hide the pods I'm still able to tap on the player

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

 

Let me know if this helps clear up things and if you have any other questions

 

Carlos C.

Ooyala Technical Support

Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Re: Ooyala Playlist Thumnail

<p>
<script type="text/javascript" src="https://player.ooyala.com/v3/107b859c93f847278555ea56aa8598bd"></script>
<script type="text/javascript">// <![CDATA[
var ooyalaPlayer;

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

    ooyalaPlayer = OO.Player.create('playerContainer', '', playerConfiguration);
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
var ooyalaPlayer;

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

    ooyalaPlayer = OO.Player.create('playerContainer1', '', playerConfiguration);
});
// ]]></script>
<script type="text/javascript">// <![CDATA[
var ooyalaPlayer;

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

    ooyalaPlayer = OO.Player.create('playerContainer2', '', playerConfiguration);
});
// ]]></script>
</p>
<div id="playerContainer">&nbsp;</div>
<div id="playerContainer1">&nbsp;</div>
<div id="playerContainer2">&nbsp;</div>

 Hi,

 

I tried hiding the thumnail using css as suggested, but the problem is I have multiple playlist video in single page.....the thumnail are hidden but its taking the additional space.. is there a way that I can hide the thumnail and remove the additional space because of the height of the thumnail section.

Can please help me on this.

 

Regards,

Bikram

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

Re: Ooyala Playlist Thumnail

Hello Bikram

 

If you want to remove the blank space that is left after hidning the thumbnails you should look into the 

class="innerWrapper", this Style has a margin-bottom set to 81px, remove or override this value with CSS and the player should ocupy the blank space left by the thumbnails

 

Let me know if this works for you

 

Thank you

Carlos Castro

Ooyala Technical Support

Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Re: Ooyala Playlist Thumnail

Hi,

 

I changed the css it doesn't work, then I modified the height for the container on run time and gave the container a fixed height and it worked.But I am facing another issue with the playlist video when I am running a standalone HTML file in server and checking the same in device it's working fine, But it's giving error as 'Please upgrade your browser to view HTML 5 content getting while playing ooyala video', when I am trying to add the code in a static jsp file.

 

Can you please help in resolving the issue.

 

Regards,

Bikram Dhal

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

Re: Ooyala Playlist Thumnail

 Hi Bikram

 

Do you have a URL where I can see the error ,and browser you are using?

Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Re: Ooyala Playlist Thumnail

The error is coming in Firefox,chrome,safari. Actually I have the code in my local server, so even if I Share the URL it won't work....Let me know on what other way I can help you out...

Occasional Advisor
Posts: 7
Registered: ‎07-01-2014

Re: Ooyala Playlist Thumnail

<script type="text/javascript" src="https://player.ooyala.com/v3/107b859c93f847278555ea56aa8598bd"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<style>
.oo-playlists-thumbnails {display:none !important;}
.innerWrapper{margin-bottom: 2px !important;}
.V1 {
<!--background: url("../images/mobileVideo1.jpg") no-repeat scroll 0 0 / 100% 100% transparent;-->
background-image: -moz-linear-gradient(rgb(29,127,156), rgb(33,108,129));
    background-image:    -moz-linear-gradient( rgb(29,127,156) /*{b-bar-background-start}*/, rgb(33,108,129) /*{b-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( rgb(29,127,156) /*{b-bar-background-start}*/, rgb(33,108,129) /*{b-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( rgb(29,127,156) /*{b-bar-background-start}*/, rgb(33,108,129) /*{b-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( rgb(29,127,156) /*{b-bar-background-start}*/, rgb(33,108,129) /*{b-bar-background-end}*/);
    border-radius: -2em 10em 10em -2em;
    color: #FFFFFF;
    font-size: 22px;
    font-weight:bold;
    padding: 0.1% 4%;
    text-decoration: none;
    text-shadow: 1px 0 0 #0B4150;
    margin: 0 0 7% 0;
    cursor: pointer;
	width:400px;
}
.V2{
background: url("../images/mobileVideo1.jpg") no-repeat scroll 0 0 / 100% 100% transparent;
color: #FFFFFF;
    font-size: 22px;
    font-weight:bold;
    padding: 0.1% 4%;
    text-decoration: none;
    text-shadow: 1px 0 0 #0B4150;
    margin: 0 0 7% 0;
    cursor: pointer;
	width:400px;

}
.h2style {
    float: none;
    margin-bottom: 1px;
    max-height: 135px;
   
}
</style>
<script type="text/javascript">
$(document).ready(function (){
$('#sandymobvid').on("click", function(){
  		$('#playerContainer').show();
		
		$('#sandymobvid').hide();
  	
  			var ooyalaPlayer;

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

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

});
</script>

<script type="text/javascript">


$(document).ready(function (){
$('#videotwo').on("click", function(){
  		$('#playerContainer1').show();
		
		$('#videotwo').hide();
  	
  			var ooyalaPlayer;

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

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

});

</script>

<script type="text/javascript">
var ooyalaPlayer;

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

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

</script>

<div id="sandymobvid" class="h2style V1">
<h2>Please click here for playing first video</h2>
</div>

<div id="playerContainer" style="height:135px !important;display:none;" ></div>
<div id="videotwo" class="h2style V2">
<h2>Please click here for playing second video</h2>
</div>
<div id="playerContainer1" style="height:135px !important;display:none;"></div>
<div id="playerContainer2" style="height:135px !important;" ></div>

 Please find the code above, If you run the html in a server and test the same in browser you will get the error that I was mentioning in my previous post, I have added a 'background-image' for first video- 'Its working fine' but when I am adding an image on top of a player container(for second video) it's giving error as 'Please upgrade your browser to view HTML 5 content'. Appreciate if some one can help me on this.  I have also attached the image that I have used for second video. Thanks in advance.!!!