Iframe doesn't transform/scale properly...

[Richard_24]

Basically I have made this site: http://8animetv.co.vu/onepiece

Here is a description of what is happening, with all of the code that has to do with it.

jquery:

`$('.episodeLink').click(function() {
$(".episodeTitle").html($(this).clone());
document.getElementById('ifrm').src = $(this).attr("href");
$(".epChange").css('display', 'inherit')
$('#youtube_iframe iframe').eq(0).attr('style','width: 728px;height: 420px;float: left;margin-left: 92px;margin-top: 30px;-ms-zoom: 0.833;-moz-transform: scale(0.8333);-moz-transform-origin: 0 0;-o-transform: scale(0.8333);-o-transform-origin: 0 0;-webkit-transform: scale(0.8333);-webkit-transform-origin: 0 0;'
);
$('#youtube_iframe iframe').eq(1).attr('style','width: 728px;height: 106px;float: left;-ms-zoom: 0.833;-moz-transform: scale(0.8333);-moz-transform-origin: 0 0;-o-transform: scale(0.8333);-o-transform-origin: 0 0;-webkit-transform: scale(0.8333);-webkit-transform-origin: 0 0;
); })`

HTML:

`<div id="youtube_iframe"> <div class="permalinkTitle"><p class="episodeTitle">One Piece on 8Anime TV</p></div> <iframe id="ifrm" name="ifrm" src="http://static.tumblr.com/c239f5a04265e2ae80ce7be610afac94/65oqtvm/6denozy2f/tumblr_static_95mwiqke5x4wc4s0owggs8wss.png"
                        class="foo" 
                        scrolling="no" 
                        seamless="seamless"> </iframe> </div> <ul> <li><a class="episodeLink" target="ifrm" href="http://online.watchop.com/s/flownew_googplayer.php?flowid=458ff05b15f71539cf0&to=1002cVselLVL&id=112100296851571938885/Op694ut$6152256030914122914">Episode 694 | Invincible! A Gruesome Army of Headcracker Dolls!</a></li></ul>`

CSS:

`#youtube_iframe iframe {
                    width: 1215px;
                    height: 700px;
                    float: left;
                    margin-left: 92px;
                    margin-top: 30px;
                    z-index:10;
                  -ms-zoom: 0.5;
                  -moz-transform: scale(0.5);
                  -moz-transform-origin: 0 0;
                  -o-transform: scale(0.5);
                  -o-transform-origin: 0 0;
                  -webkit-transform: scale(0.5);
                  -webkit-transform-origin: 0 0;
            }`

What happens is that when you click on the .episodeLink link it changes the html of the title div to what the content of the link is (the title of the episode).
Then it changes the source of the iframe to the href of the link, which is the episode you want to watch
Lastly it transforms/scales the iframe so that it will fit perfectly. It scales it from 0.5 which is the size required for the image, which loads up at the beginning, to fit perfectly, to 0.8333 which is the required size for the video players to fit perfectly.
It seems, though, as the buttons of the iframe (play button, fullscreen button etc.) doesn't scale to 0.8333...
Any ideas of where the problem might be?