<script> inside <script> Cant figure out how I can do this

Question

I didn't initially expect to need to call in anything but Iframes but clearly I was wrong. here is my code and you can see why its breaking its the script inside the script-/script whats a way to get around this?

$ad_blocks =
    array(
        array(
            '<iframe data-aa="16301" src="//ad.a-ads.com/16301?size=728x90" seamless frameBorder="0" scrolling="no" style="width:728px; height:90px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
            '<iframe data-aa="16302" src="//ad.a-ads.com/16302?size=468x60" seamless frameBorder="0" scrolling="no" style="width:468px; height:60px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe>',
            '<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
        ),
        array(
            '<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=290bf071-762b-4000-9599-32f9a3daf628&size=728x90"></script></div>',
            '<div><script type="text/javascript" src="http://ads1.qadabra.com/t?id=d7f3bbc3-9ef1-4558-98a1-4c8051e2dc99&size=468x60"></script></div>',
            '<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>',
        ),
    );

    //Get a random ad block, and store it in $rotate.
    $random_key = mt_rand(0, count($ad_blocks) - 1);
    $rotate = $ad_blocks[$random_key];

    //These units contain the ad codes for the three sizes.
    $ad_size1 = $rotate[0];
    $ad_size2 = $rotate[1];
    $ad_size3 = $rotate[2];
    ?>

    <div class="col-lg-7">
        <div class="A-Ads-Container">
            <script>
                //This function makes sure the code is executed after page is loaded.
                if ($(window).width() >= 768) {
                    $('.col-lg-7, .A-Ads-Container').html('<?=$ad_size1?>');
                } else if (($(window).width() < 800) && ($(window).width() >= 500)) {
                    $('.col-lg-7, .A-Ads-Container').html('<?=$ad_size2?>');
                } else {
                    $('.col-lg-7, .A-Ads-Container').html('<?=$ad_size3?>');
                }      
            </script>
        </div>
    </div>

Answer 1

Though I'm not sure exactly what you're trying to accomplish, you are weaving tags, and this will cause unpredictable behavior. For example, this array element

<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></div></iframe>

should instead be

<div class="A-Ads-Responsive"><iframe data-aa="16303" src="//ad.a-ads.com/16303?size=320x50" seamless frameBorder="0" scrolling="no" style="width:320px; height:50px; border:0px; padding:0;overflow:hidden" allowtransparency="true"></iframe></div>

Notice the order of the closing div and iframe tags.