Log in

[sdumosch]

Hi,
Can someone help me understand why this doesn't work? I want to resize the subscriber stream using a CSS class as described in the Best Practices tutorial. I'm not using jquery though. here's my final html:

<div id="subscribers">
<object type="application/x-shockwave-flash" id="subscriber_486229130_1" style="outline:none;" data="http://static.opentok.com/v1.1.0/flash/f_subscribewidget.swf partnerId=21524152" width="320" height="240"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent">...(rest of tokbox code here)
</div>

I then want to make it smaller or bigger using these styles:
div.small {
width: 100px;
height: 75px;
}
div.medium {
width: 400px;
height: 300px;
}

I then call this function to add the new class to the 'subscriber' div:
document.getElementById("subscribers").className += "small";

The class gets successfully added to the div but nothing changes. Am I missing something? I am using Chrome.

Thanks,
-steve

[adam]

You need to change the size of the object tag not the div around it. You can do that with:

Code: Select all

...
var subscriber = session.subscribe(stream);
var subEl = document.getElementById(subscriber.id);
subEl.width = 100;
subEl.height = 75;


For some reason you actually set the width and height elements on an object tag as opposed to the style.width and style.height and you don't add the "px" on the end.

[sdumosch]

Thanks for this. It helps - somewhat. The scenario i'm trying to do is allow a user to pick from a dropdown box of 3 sizes of the video frame (small, medium, large) and have the video resize accordingly. I'm not sure how to get a hold of the stream object when i'm starting a call from a dropdown select event. Any advice? Should I call session.signal()?

[adam]

You don't need to signal the other side to change the size of the stream. You can just change the size of the subscriber widget locally with the code above.

[sdumosch]

Sorry i think i'm missing something - in your code above you reference the stream object. When i raise my event from the dropdown selection, the only object i have access to is the session object. How do i get a proper stream object from the session object?

[sdumosch]

SOLVED. The problem i had was really the CSS Style syntax. You need the > * in the styles to make it work. ie.
<style type="text/css">
div.small > * {
width: 100px;
height: 75px;
}
</style>

You can then simply get a handle to the wrapper div and change the class name appropriately:
el = document.getElementById("subscribers");
el.className = 'small';

[janine]

Awesome. Thanks for sharing back with the community!

[adam]

That works too, that way you're changing the size of all the direct children of the div so the object tag will change size as well. Probably safer to use

Code: Select all

div.small > object,div.small > embed {
...
}


in case you add any other elements into your container div.