title: How to override an iframe styles?
body: <p>I have iframe and I need to override its styles</p>
  
  <pre><code>&lt;iframe id="randomVerseIframe" src="http://sitename.org/ajax/random/" width="210"   height="270" title="" frameborder="0" scrolling="no"&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>I try:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var head = jQuery("#randomVerseIframe").contents().find("head");
      var css = '&lt;style type="text/css"&gt;' +
      '#sinodal, #modern{font-size: 0.5em}; ' + 
      '&lt;/style&gt;';
  jQuery(head).append(css);
  &lt;/script&gt;
  </code></pre>
  
  <p>But when I check the generated html those new styles don't apply.</p>