i have use this code but it result inline css like width:1220px;height:600px depending upon screen size from jquery.colorbox.js .and if i want to use media query for responsive colorbox first i have to remove this inline css but i am not able to find width and height in jquery.colorbox.js.help me how i can make colorbox responsive.
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)){
if(window.orientation==90 || window.orientation==-90){
$(".iframe").colorbox({iframe:true, width:"99%", height:"98%"});
}
else{
$(".iframe").colorbox({iframe:true, width:"98%", height:"53%"});
}
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
if(window.orientation == 90 || window.orientation == -90 ) {
$('meta[name="viewport"]').attr('content', 'width=device-height');
$(".iframe").colorbox({iframe:true, width:"99%", height:"98%"});
}
else{
$('meta[name="viewport"]').attr('content', 'width=device-height');
$(".iframe").colorbox({iframe:true, width:"98%", height:"53%"});
}
}, false);
}
else
{
$(".iframe").colorbox({iframe:true, width:90%,height:98%,scrolling:false});
}
});
</script>