How to make the 5centsCDN Player responsive for Mobile?

You can find the code for the 5centsCDN Player from the control panel. To make it responsive for mobile devices, you can modify the iframe code with additional styles. Below is a sample code taken from the 5centsCDN dashboard.

<iframe style="overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;" src="base64_encoded_url?showcv=false&amp;title=player1/stream&amp;hideshare=true" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

You can include the following code within the

Below is the iframe code with the added style. You can copy this code and replace the iframe src URL to obtain a responsive player.

<div class="box-h" style="width: 100%; height: 100%;"><iframe style="overflow: hidden; overflow-x: hidden; overflow-y: hidden; height: 100%; width: 100%;" src="base64_encoded_url?showcv=false&amp;title=player1/stream&amp;hideshare=true" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <style>
.box-h{
height: 500px!important;
}
@media only screen and (max-width:767px){
.box-h{
min-height: auto!important;
max-height: 300px!important;
}
}

</style></div>