The embed code of the player will need to be modified for the player to be responsive or mobile-friendly. A responsive player will automatically scale in size to fit any mobile or desktop device the stream may be viewed on, which thereby delivers the best viewing experience to all viewers.
How do I modify the embed code to make it responsive?
The type of embed code you are currently using will determine the changes you need to make to your embed code for it to be responsive.
Please refer to working samples of embedding the player into responsive UI for both types of embed code here:
Some additional notes on the "holder" or standard embed method:
Specifically, for the standard embed code the option camvars.rsp_mode = "aspect"; will affect whether the player is responsive.
Some additional notes on the iFrame embed method:
The simplest solution you can try is to specify the iFrame dimensions as a percentage of the parent DIV. But, in this case, the parent DIV should be responsive as well.
See the sample below:
<!-- Begin of webcam code -->
<iframe style="width:100%; height:100%; padding:0px; border:0px" seamless="seamless" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="https://relay.ozolio.com/pub.cgi?cmd=iframe&oid=CID_CHHN000001E6&app_mode=control&allow_pan=false&allow_tilt=false&allow_zoom=false&allow_center=false&allow_home=false&disp_name=&disp_desc=&chn_mode=none"> </iframe>
<!-- End of webcam code -->
Please note, we cannot guarantee that this approach will work, as all web pages are different.
My player is still not responsive and I need help!
If you continue to have issues with embedding the responsive player, please email email@example.com and include the page URL you are attempting to embed the player into. We can review your HTML code in order to provide you with better recommendations.