Having trouble implementing Captivate simulation in an iFrame

Question

Hi all, hoping you can give me some pointers.
I'm trying to implement Captivate scalable html5 simulations in a proprietary LMS that requires that I place it in an iFrame.  It works, but the scaling is not working properly.  Immediately upon loading, the Captivate content is too large for my frame, although it does resize (still too large) when I scale the page. 
Are there any known tweaks for this kind of issue?
Thanks in advance,
Jill

Answer 1

Not sure if you still need this, since it has been nearly a month.
But I just ran into this same issue.
Require using HTML5 with Captivate inside of an iFrame.
The "Scalable html" was ignoring the iframe's dimensions, and using the full window dimensions instead.
What I ended up doing is stop using the "scalable html" option when publishing from captivate. and then i used the following javascript inside the html that the iframe was placed:
    <script type="text/javascript">
        var iframeName = 'trainingVideo';
        this.FindZoomHeight = function () {
            var slideshow = $('#main_container', $('#' + iframeName).contents());
            var showHeight = $(slideshow).height();
            var frameHeight = $('#' + iframeName).height();
            if (frameHeight >= showHeight) { return 1; }
            return (frameHeight / showHeight);
        this.FindZoomWidth = function () {
            var slideshow = $('#main_container', $('#' + iframeName).contents());
            var showWidth = $(slideshow).width();
            var frameWidth = $('#' + iframeName).width();
            if (frameWidth >= showWidth) { return 1; }
            return (frameWidth / showWidth);
        this.SetZoomLevel = function () {
            var zh = FindZoomHeight();
            var zw = FindZoomWidth();
            var zoom = 1;
            if (zh < zw) {
                zoom = zh;
            } else {
                zoom = zw;
            var container = $('#main_container', $('#' + iframeName).contents());
            $('body', $('#' + iframeName).contents()).css('-moz-transform-origin', '0 0 0').css('-o-transform-origin', '0 0 0').css('-moz-transform', 'scale(' + zoom + ')').css('-o-transform', 'scale(' + zoom + ')');
            $(container).css('zoom', zoom);
        $(document).ready(function () {
            $(window).resize(function () {
                SetZoomLevel();
        $('#' + iframeName).load(function () {
            SetZoomLevel();
    </script>
This uses the css zoom property. (uses transform scale in firefox/opera..but captivate doesn't support those browsers anyways)