Need correct inline jQuery syntax to change fancybox dimensions

I'm using fancybox to successfully display iframes on a page. I need to be able to change the dimensions of the fancybox iframe for different uses. My understanding is that inline jQuery is likely the best option to modify the CSS, but I can't get it to have any effect.

If I change these CSS dimension values in the CSS file and republish it, it works just fine – but it works for all fancyboxes on the page. These dimensions are the ones that I need to change inline for different instances of fancyboxes.

I've tried to add inline jQuery right before this html that modifies the fancybox CSSenter code here dimensions for this fancybox, but either I'm getting the jQuery syntax wrong or I'm placing it in the wrong place. Here's an example one of the many jQuery calls I've tried with the html based on online suggestions:

Please help with any corrections/suggestions!

Edit: The CSS in the file is working. Is it ok to use ".fancybox-slide--iframe .fancybox-content" in the inline jQuery call?

Edit2: Could it be a timing issue? Could the markup be running before the jQuery has changed the CSS?

$(".fancybox-slide--iframe .fancybox-content").css("width", "1200px");

.fancybox-slide--iframe .fancybox-content {
  width  : auto;
  height : auto;
  min-width: 600px;
  min-height: 500px;
  max-width  : 100%;
  max-height : 100%;
  margin: 0;
  box-shadow: 0 0 16px #999;
    border: 3px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-track-container">

   <a class="text add-track-container2" data-fancybox data-src="../../test/ytsearch/index.html" href="javascript:;">

      <img class="add-track-icon" src="common/images/desktop_icons/addcircle50.png" alt="Add Track" />

   </a>
</div>

Solution

Figured it out. I wasn't attaching to fancybox correctly. Once I fixed that, all was good. Here is an example of how to apply different fancybox settings to multiple DIVs/Classes for the next person looking for a simple example ...put this at the bottom of your page, right before :

           <script>
                $('[data-fancybox]').fancybox({
                    toolbar  : false,
                    smallBtn : true,
                    afterClose: function () {
                    parent.location.reload(true);
                }
                })

                $(".log-reg").fancybox({
                    toolbar  : false,
                    smallBtn : true,
                    iframe : {
                        css : {
                            height : '500px'
                        }
                    }
                });
            </script>