HTML - Responsive Youtube Vids Going To Small On Devices

Hi ,
I am playing around with the code for getting videos to resize in response to what device they are being viewed on .

The youtube screen is 50% on desktop but when i minimise the youtube box on other media its making it to small for that devices ..

.size-one .fluid-width-video-wrapper iframe,
.size-one .fluid-width-video-wrapper object,
.size-one .fluid-width-video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 50% !important;
height: 50% !important;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js"></script>

<script>
// FitVids
jQuery(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
jQuery("#wrapper").fitVids();
});
</script>

<div class="my-size-one">
"DUozxfgsclY"
</div>

<div id="featured">
<h3>video tests...</h3>
<div class="size-one">
<iframe src="http://www.youtube.com/embed/DUozxfgsclY" frameborder="0" width="560" height="315"></iframe>
</div>

Anyone know why ?

Thanks in advance and im sorry if this is in the wrong posting place. If so can you tell me where it needs to go .

adam