Brightcove Responsive Sizing for Video Players - html

Question

I just working on Brightcove Responsive but i am not sure why Brightcove video not resize when I using viewport below.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
If i don't use viewport so when I rotate in mobile is working well.
Here my css code
<style type="text/css">
.containing-block {
width: 100%;
}
.outer-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
And Brightcove code
<div class="containing-block">
<div class="outer-container">
<!-- Start of Brightcove Player -->
<div style="display:none">
</div>
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at https://accounts.brightcove.com/en/terms-and-conditions/.
-->
<script language="JavaScript" type="text/javascript" src="//sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience1754276206001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="1753810340001" />
<param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrdihurn3hYnYJWo8k_gM6uF" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="#videoPlayer" value="1754276206001" />
</object>
</div>
</div>
Thanks for help me